(Title) CSL TRAINING

(Subtitle) Welcome to our training, also a tribute to cute dogs. Here you can learn a bit more about using Contentful to create a nice LP, like this one.

(Header button text) Discover more

FYI: THIS IS THE SOK CAMPAIGN TEMPLATE USED BY SEO. AND I'M SARA, CONTENT STRATEGIST FROM CSL!


Core content introduction

In this content block you usually write the summary or the overarching topic of the page. The good thing about it, is that the break between this block of text and the Core Content body (required) space is quite visible and it can help you differentiating topics in the page. I used this trick in the Ukrainian Home page if you want to take a look. You can use a maximum of 50.000 characters here, add images and different media.. just like in the Core content body.

BEST PRACTICES and TIPS:

  1. Use Preview constantly : If it gives Error check under the button Open preview and make sure it says Platform: Production. Remember that you can see the Preview if you pre-fill most of the required blocks.
  2. Always ask SEO before creating a page in their SOK space
  3. Never hit Publish unless you cleared the url and tracking link with SEO and the stakeholders are informed.
  4. Images mantainance: You can find all the images you just uploaded in your page under Media in the upper Navigation bar. If you end up not using them and they are not connected to other pages, just delete them or they will clutter the Media space.
  5. Video&OtherMedia: currently we can only upload YT videos, but don't limit your Content Strategy - talk to SEO or Delivery Heroes if you have a specific idea on a widget (we can add Spotify playlist here, fun right?) or a file format you would like to include. We can use animated images as well!

Core content body (required)

The Core content body section is the heart of you page and you can costumize it as you like. For some SEO campaigns, for example, we use this space to add the infographic as whole image and use the Core content introduction as text box.

You can create very nice lists to summarize a concept, like this

  1. Tokyo is a nice dog
  2. Tokyo is a small dog
  3. Toky looks like a ball of fluff
  4. I'm using the numeric list, and this is how it looks like.

Same lists can be done like this

  • Tokyo is a nice dog
  • Tokyo is a small dog
  • Toky looks like a ball of fluff
  • I'm using the bulleted list, and this is how it looks like.

You can also create a table

Tokyo Contentful
nice dog CMS Tool
small dog Easy Tool
ball of fluff Not soft at all

It will look a bit weird in Markdown, but don't forget you can always check Editor and Preview version in your editing bar.

Editor / Preview

Sidebar Content

You can read more about the Sidebar functions... in the actual Sidebar.

Related Content aka Magazine Article

This is a tricky one...

The Magazine section allows you to link 3 articles to the page. It won't display if you only link 2 articles and it won't work with more than 3. Keep in mind this fixed number. Title, Descriptions and images have to be added manually. To add Babbel Magazine links, or any other link to that section, you need to follow a somehow conterintuitive order:

  • Go to Realated content button links, insert the links and remember the input order:

Link Input

  • Go up to Related content headelines, insert the articles titles in the same input order:

Related Content headlines - Articles Titles

  • Now input the Related Content descriptions, following the same input order again (1,2,3):

Related Content Description 1

  • Add the images following the same order in Related content media - images

Screenshot 2022-05-17 at 18.24.35 Screenshot 2022-05-17 at 18.29.55

Attention here: not all the images will work, but the Design team usually goes for a Thumbnail format. Usually, dowloading the Magazine header of the article and upload it in Contentful as Article thumbnail works pretty well size wise.

If you make a mistake in the order of Links, Article's Titles or Images you don't need to start from the begininng: you can move the asset around by clicking in the left side, by the little dots.

Full width image

The Full witdth image is part of the template but, same as the Sidebar, the Sharing banner, the Magazine Section and the other non hardcoded parts of the page, it will only appear if you actually add an image there.

TIP:

Gettig the right size for this image is a bit tricky, here you can find the info of our last successful upload in the Ukrainian Index page. File Infos Full Width image

Testimonial space and FAQs

Read more about that in the specific spaces!

Footer - a part of it

Part of the page Footer is editable, which means you can always create a special column with new links to specific pages. You can add a total of 3 columns. To edit the Footer you will need to assign a title to the new column in the SEO footer Xst column headline and then add a list of links in SEO footer Xnd column links using the formatting suggested under the text cell, which is the same Markdown formatting used for links in the Core Text Body and Introduction.

Core content button text - Find a treat

Testimonial Headline

Corsi di inglese online
Testimonial image caption

This is perfect for quotations, but also to showcase bits of text you want to highlight - We do use it a lot for our Babbel DID experts. The text has no formatting options, but it could be 50000 characters long. To see this whole section in the preview you need to fill all the blocks related to it: headline, image, caption and body text.

FAQ (Heading 2)

Please format the FAQ section header as heading 2, all questions as heading 1 and all answers as normal text. This will let the rendering code know how to distinguish among headline, questions and answers.

Too cute to be true! (Normal text)

Very Much! (Normal text)