How to easily create your website with Yapla

Having a website is important to establish the digital presence of an NPO. Starting with the Flight package, you will be able to create a website to present your mission, your services and to receive payments. A website is a generator of trust and commitment to your association.

It is not necessary to have a very complex website visually, but the important thing is to include everything that characterizes you and allows you to go forward with your mission, here are some examples:

  • logo and colour
  • text about your mission and services
  • your membership and/or donation campaign
  • a list of your events
  • links to your social networks

In addition to your social networks and newsletters, the creation of content on your website will allow you to gradually build your natural SEO (search engine optimization) and to bridge the gap between these communication channels.

Here is how to create the first pages of your website with Yapla.

Customize the site and the homepage

Yapla allows you to quickly create a site with your organization's colours, which you can then enrich over time by adding additional pages and content. 

Before you start

Before creating your site, make sure you add your logo and social networks, as these will be used on your website. To add this information, click on the Settings menu in the left column, then click on the Your Organization tile.

settings-organization.png

There you will be able to add your organization's logo in the Logo submenu and your social network addresses in the Social Networks submenu.

social-networks.png

Create the website

Click on the Website application in the left-hand column, then click on Add a Website.

Once your site is created, you will be asked if you would like to add a homepage. If you accept, the first page of your site will be automatically created.

Customize the content

By default, the created site will have the following modules: 

  • Header (with your logo)
  • Menu (with the list of your pages)
  • Banner
  • Custom content
  • Footer (with links to your social networks)

Each of these modules can be customized, according to your needs.

To change the content of a page, click on it.

edit-page.jpg

You will then have 2 ways to change the content of the page: via the Edit menu, which gives a preview of the page as your visitors will see it, or via the Structure menu, which displays only the skeleton of the page, with the list of modules.

Change the banner

The banner is displayed between the menu and your main text. It can be customized to use your own images, as well as custom text.

To modify the banner, click on it in the edit of your page. A panel will then open with the configurations.

Here you can change the banner by choosing among the proposed images or by selecting your own image and the text displayed on it.

Note: since the default banner is dark, the text is white and therefore not visible in the editor. You can however see it by highlighting it with your mouse. 

Add your text

Once the banner is adjusted, click on the section just below to modify the welcome text. It is important to have some text on the home page, to introduce the site to your visitors but also to help it rank well on search engines. You can use this section to introduce your organization and talk about its mission and values.

Change the colours and font

Once you have your content in place, all you have to do is customize the look and feel. On the main page of your site, click on the Customization tile to access the available colours and fonts.

customize-website.png

Choose colours and fonts that match your logo. If you have css knowledge, you can also go further by customizing the skin of your pages. 

Finalize the configurations

You now have a site with a first page. You can view it by clicking on the Visit my site button. Don't forget to add Google Analytics to get statistics on your visitors. And don't forget to talk about your site on your social networks in order to be found by your contacts but also by the search engine robots, which will then add your pages in their search results.

Create my membership campaign page

To allow your members to renew or get new members, we advise you to create a page for your membership campaign. This will also serve as a login page for them to update their information.

Start by creating your membership campaign from your dashboard. This will allow you to customize your membership form, add your different types of memberships and set a price for them. For more information on how to create your membership campaign, you can read this article: create a membership campaign.

Go to the Website application, then click on the Pages tile.

At the bottom right, click on Add a page. Here you can fill in the URL of the page and give it a name, for example: "Join!", "Become a member" or "Join us".

add-page.png

Once configured, click Next Step.

add-page-member.png

The page is now visible on your website but empty when clicked. 

To add your membership campaign to this page, click on the page you just created. Then, under the Structure tab, select the area where you want to add your membership campaign (we recommend using the Main Area to add your membership campaign).

structure-main-area-section.png

Once in the area, a page will appear, this page will allow you to choose the content of this area. 

In the Feature field, select Members and in the Zone module field, select Member Section.

member-section-module.png

Then click on Save and close. Now your membership campaign appears on your website.

In the header of your website, we strongly advise you to create "calls to action" with, for example, a Login button or a Renew my membership button.

To set up the login, go to Website and then Pages. Then click on the home page of your website. Under the Structure tab, click on Header.

structure-header-section.png

A page will appear where you can configure your actions. For example, check the Displau Login section and check the items you want to display in your header.

member-section-header.png

In the field Connection page it is important to select Become a member.

Once configured, the call buttons will appear in the header of your website.

Create my events page

In order to publicize your events, training or meetings, we advise you to create a page for your events. This page will allow you to display one or more events depending on the size of your calendar.

To create your event page, make sure you have created and configured your first event on Yapla. To create your event page, make sure you have created and configured your first event on Yapla. 

Once your event is created, here are the steps to publish it on your website:

Go to the Website application, then click on the Pages tile.

At the bottom right, click on Add a page. Here you will be able to fill in the URL of the page and give it a name, for example: "Our Events", "Activities", etc.

add-page.png

Once configured, click on Next Step.

page-events.png

The page is now visible on your website but is empty when clicked on. To add your events to this page, click on the page you just created. Under the Structure tab, select the area where you want to add your Event module. Generally speaking, we recommend adding it to the area named MainArea.

structure-main-area-section.png

Once in the area, you will need to configure the module. To do this, you need to select the Event application and the Event Section zone module.

module-event-section.png

It is also possible to have a featured Events module. For more information on this second module, here is an article that might interest you: Featured Events.

Still in this window, you will have to configure the graphic interface. You must choose the display you want for your events. Generally speaking, if you have more than one event, it is advisable to use the Mosaic mode since it allows you to display several events at once. 

event-mosaic.png

Another important section to configure is the display of elements on the detail page. This allows you to choose the important information to be displayed. Check all the information you want to display.

detail-page-settings.png

For more details on the configurations, you can consult the article on the Event Section which details all the options of the module. 

Once everything is configured, click on Save and Close. You can now go to your website and see your Yapla events. It is very important to have events published so that they can appear on your website.

Create my donation page

In order to publicize your fundraisers, we recommend that you create a page for your donation campaigns. This page allows you to post one or more campaigns.

Start by creating your donation campaign from your Yapla dashboard where you will be able to: give a name to your campaign, define a financial goal, create a donor form... You can find the different steps to create this campaign here.

Once your donation campaign is created, here are the steps to publish it on your website:

Go to the Website application, then click on the Pages tile. 

At the bottom right, click on Add a page. Here you will be able to fill in the URL of the page and give it a name, for example: "Donate" or "Support Us".

page-donate.png

Once the page is created, click on it, then on the Structure tab.

Here you will be able to see the whole structure of your page and more precisely choose at which level you want to add your Donations module. We recommend choosing the MainArea to insert your module.

structure-main-area-section.png

Once you are in the MainArea, you can configure it. To do this, in the Application field, select Donations and then in the Module field of the area, select Donations Section.

module-donation-section.png

Then you will arrive at the Module Configuration step. Here you will have to choose the display you want to offer to your future donors. If you have several existing donation campaigns, we advise you to choose the Mosaic mode because it allows you to display several campaigns at the same time. 

donations-mosaic.png

You can also choose several criteria such as: display the list of donors, the description of the donation campaign, the amounts collected and also the financial objective of your donation campaign in the form of a thermometer. 

donation-settings.png

Finally, you will be able to choose the redirection page of the button that is displayed at the end of the donation form.

donation-redirect.png

For more details on the configurations of the module, you can consult the article on the Donation Section which details all the options of the module. 

Once everything is configured, save and close. You can now go to your website and see your Yapla Donation campaigns.

To go further

Listen to the tutorial Create a website with Yapla (in French)
Visit the Create my website section
Use the Yapla onboarding service

Was this article useful?

Comments

0 comments

Please sign in to leave a comment.