GSD

How To Streamline Content Localization With DeepL and ButterCMS

Posted by Levis Masonde on August 30, 2023

In today’s interconnected world, where digital channels transcend borders and cultures, the importance of localization cannot be understated. In fact, nearly 73% of customers prefer to purchase from a site that offers information in their own language and 65% would prefer reading content in their language, even if it was poor quality. Meaning, if you’re not localizing your content, you could be alienating a whole slew of potential customers. 

However, as essential as localization is, it is not easy to implement. Cost and quality are the two largest hurdles you'll need to overcome, as third-party localization technologies can be costly, and more affordable options tend to struggle with capturing the nuances of language.

Fortunately, one of ButterCMS's latest integrations, DeepL AI, was created to fill this gap and tackle language barriers by enabling content creators and marketers to translate their online content using DeepL's advanced neural networks. These networks capture even the slightest linguistic nuances and deliver real-time translations that sound human. This integration will allow you to localize your web applications powered by ButterCMS.

In this tutorial, we'll create a CRM SaaS landing page using Laravel and ButterCMS. Then we will translate the content using DeepL. Since I can understand and read Spanish, we will translate the content from English into Spanish. I also reverse-checked the translations to ensure that they obey Spanish grammar. DeepL is designed to improve your translation workflow, not replace it altogether.

To get started, we'll use ButterCMS to create a Page Type for our landing page. Before we begin creating the Page Type, it's necessary to set up the Collections and Components. These elements will assist us in constructing distinct sections of the Page Type in an organized and fluid manner. All the code for this tutorial can be found in this GitHub repo

Enabling the DeepL AI integration

To enable your DeepL AI integration, log in to your ButterCMS dashboard, hover over your profile picture icon, and click on "Integrations":

navigate to integrations

This action will redirect you to the settings page for integrations. Once you're on the page, scroll to the bottom to find the DeepL integration section. Click on the checkbox button to enable it:

Check the box to enable.

Prior to utilizing DeepL in your portal, you need to add the locales it can recognize. DeepL supports multiple locales, and you can find the complete list here.

Adding a New Locale

Before you can avail the option to translate content, you must include the name and slug for a new locale. To accomplish this, hover over the profile icon and click on "Settings":

Select Settings

This will redirect you to the Settings page. Once you're on the page, click on the "Localization" tab in the navigation:

Click the Localization tab

After being redirected, input the name and API slug for your locale, and then click on the "Add Locale" button:

Select Add Locale

Clicking the button will prompt a pop-up warning modal; click "Proceed." Once the first one is added, proceed to add another one with the following attributes:

  • Name: Spanish

  • API slug: es-es

The list of all locales should appear as follows:

List of locales

Excellent! You have successfully configured your ButterCMS account to incorporate DeepL Spanish translations.

Now, you will begin creating Collections and Components for the SaaS landing page we are about to build. The website's translation will be addressed in the final section since we need to construct the website before translating it. However, for collections, you will need to translate them individually after adding content to ensure that both an English and Spanish version of the content is available.

Learn how ButterCMS can streamline your content management.
Start a free trial

Utilizing collections for storing navigation and quote data

Collections are utilized by ButterCMS to effectively store data for a group of items with similar properties or attributes. Collections are a potent tool within ButterCMS, as they can be employed by a Component, another Collection, a Page Type, or directly integrated into the frontend using a simple customized function called fetchContentFields

Creating the Collection for Menu Items

To initiate the creation of your menu items collection, hover over the Content Types icon in the sidebar and click on the "+" button located next to "Collections":

Select Collections

After being redirected to the Collection's configuration page, proceed to add the following Content Fields to the schema:

  • Short text: MenuItem

  • Short text: UrlSlug

This is what the schema looks like:

SaasNavigationItem collection schema

Once you've completed the setup, click the "Create Collection" button and save the Collection as "SaasNavigationItem".

Adding Data to SaasNavigation

Once you've saved the Collection, proceed to populate it with collection items. Hover over the Collections icon on the sidebar and click on the "+" button next to "SaasNavigationItem":

Select SaasNavigationItems from Collections menu

Next, input the content for the Collection, and then click the "Publish" button to publish:

Add item to SaasNavigationItems collection

Repeat the steps mentioned above and add more items to the SaasNavigationItems collection.

Translating the SaasNavigation Collection Items

Once you've published the English version, click the "DeepL Translate" button, choose Spanish, and then click "Translate" to translate the content into Spanish:

Click translate

Now, publish the collection item again. To confirm the accuracy of the translation, click the dropdown menu labeled "English" and choose "Spanish". Once you've selected Spanish, you will see the translated version of the item. 

Select Spanish

Translated collection item

DeepL did not attempt to translate the website URL, but it did correctly translate 'Home.' In Spanish, "Home" is typically translated as "Casa," but in the context of a website, "Casa" would not be the appropriate term to use. Instead, "Inicio" is a more suitable term:

Translations of Home

Now, translate all the other items you added to the SaasNavigationItems by following the same steps as mentioned earlier.

Refining Your Translations

As you translate the "contact" item in SaasNavigationItems:

Contact information SaasNavigationItem (english version)

The translation returned the following:

Initial Spanish translation of collection item.

"Póngase en contacto con" simply implies "get in touch by contacting." Not to say the translation is incorrect, but since we are translating a menu item, we would prefer to have a one-word translation for display on the navigation menu. So, to refine this, you can easily substitute the translation with "contacto" and then publish:

Refined translation

Make sure to review your translations and verify if they align with the context of your web application. Adjust them where needed.

To view all the translated collection items, hover over the Collections icon, click on "SaasNavigationItem," and then select the Spanish filter:

Collections dashboard showing the spanish versions of saasnavigationitems collection items

Now you can proceed to create additional Collections. Please note that these steps will also be applied to translate the next two Collections we create.

Creating the Quotes Collection

This collection will serve to store customer quotes and testimonials. To initiate the creation of your collection, access ButterCMS' dashboard, hover over the Content Types icon in the sidebar, and click on the "+" button next to "Collections":

Select Collections

This action will redirect you to the Collection Configuration Page. The collection will include the following Content Fields:

  • Short text: full_name

  • Long text: quote

  • Media: image

The schema on the configuration page should look like this:

QuoteCollection schema

Save the collection as "QuoteCollection".

Adding items to QuoteCollection

To begin adding data to the collection, hover over the Collections icon on the sidebar and click on the "+" button next to "QuoteCollection":

Select QuoteCollection

After being redirected to the "Add Item" page, add content to the fields and upload or drag an image from your computer to the image field:

Add item to QuoteCollection

Once you've added the item's data, click the "Publish" button to save the information.

Translating the QuoteCollection

To begin translating the content of the QuoteCollection item, click the "DeepL Translate" button.

Select DeepL Translate button

In the pop-up, select the checkbox next to Spanish and then click the "Translate" button:

Check Spanish then click Translate

Once the translation is complete, click on the Language dropdown and change it to Spanish:

Select Spanish from dropdown

This is the translated content:

Spanish version of the collection item

Once again, DeepL does an excellent job of translating the quote—it is spot on and requires no adjustments. It's reassuring to observe that DeepL maintains a natural translation without overcompensating.

Now, proceed to add more items to the QuoteCollection and translate them:

Dashboard showing list of translated items in the QuoteCollection

Creating Collections for Clients

In this section, you’ll be creating a collection intended for storing the logos of the company's prominent clients. Displaying the logos of your key clients can aid in building trust with prospective clients.

Proceed as per the previously outlined steps to initiate the creation of a Collection, and incorporate the subsequent Content Fields:

  • Short text: name

  • Media: icon

This is how the schema will look:

Client Collection Schema

Save the Collection as "ClientCollection".

Adding Data to the ClientCollection

To begin adding data to the collection, hover over the Collections icon on the sidebar and click on the "+" button next to "ClientCollection":

Select ClientCollection from Collections Menu

This action will redirect you to a page where you can input your content. Add your content and save it by clicking the "Publish" button:

Item added to ClientCollection

After adding your initial item, replicate the same steps to include more client information. To view all the items added to the Collection, hover over the Collections icon on the sidebar and select "ClientCollection":

Select ClientCollection from the Collections Menu

This action will redirect you to the Collections page filtered to show all the items in the ClientCollection:

List of items in the ClientCollection

There is no necessity to translate these collection items, as the collection pertains to brands that typically maintain the same name globally, along with their logos.

Creating a features Collection

This collection will be used to store a summary of what users can do with the CRM SaaS software we’re creating a landing page for. Navigate to the Collection configuration page and add the following fields:

  • Media: icon

  • Short text: description

The schema will appear as follows:

FeatureCollection schema

Once done, click the "Create Collection" button and save the collection as "FeatureCollection".

Adding items to the FeatureCollection

To add items to the FeatureCollection, hover over the Collections icon on the sidebar and click on the + button next to FeatureCollection:

Select FeatureCollection

After this action, you’ll be redirected. Add content to the first item:

Add item to FeatureCollection

Click on the Publish button to save your content. Then repeat the step above to add more items to your collection.

Translating the FeatureCollection

 After adding the content, translate it by clicking on the DeepL Translate button:

Select DeepL Translate button

Now, on the pop-up, check the Spanish box and click on the Translate button:

Select Spanish and click Translate

Once translated, click on the language dropdown and select Spanish:

Select Spanish from the dropdown to view the Spanish version of the collection item

Here is the translated Spanish version:

Spanish version of collection item

The translation is impeccable; no adjustments are required here.

Reiterate the steps outlined above to add more items and translate them. To view all the items within the collection, hover over the Collections icon on the sidebar and choose "FeatureCollection":

Select FeatureCollection

This will lead you to a page with a list of all the items added to the FeatureCollection:

List of items in the FeatureCollection

This collection will be referenced in the SaasHeroComponent we will be creating next.

Creating components for the page sections

Creating the Hero Component

The first section the user sees when landing on a landing page is often the hero section. It is ideal to show the user a list of how they can use your services. Note that the list of features was created in the section above as a Collection named FeatureCollection. So we will have a background image, heading, and a list of your prominent features. 

To start creating your component, hover over the Content Types icon on the sidebar and select the "+" button adjacent to "Components":

Select Components

Upon redirection to the Component configuration page, the Component will feature the following schema:

  • Media: backgroundImage

  • Short text: headline

  • Short text: sub_headline

  • Reference: featureReference

    • One-to-Many relationship with FeatureCollection 

This is how the schema of the Component appears:

SaasHeroComponent configuration

Save the Component as "SaasHeroComponent". 

Creating the Features Component

When constructing a landing page, it's crucial to provide a glimpse of the features you offer. We will utilize the WYSIWYG content field to empower our Component to house content, and we'll employ the Repeater content field to showcase an array of grouped content. This approach also complements object-oriented programming languages.

To begin crafting your component, hover over the Content Types icon on the sidebar and click the "+" button next to Components.

Select Components

Once redirected to the Components configuration page, let's start by adding a Repeater named “feature_list” to handle all our features and their description. Add the following fields:

  • Repeater: feature_list

    • Short text: heading

    • Long text: description

feature_list repeater schema

After adding the repeater, let’s add a WYSIWYG Content Type named feature_demo to handle the more complex content: 

Add feature_demo WYSIWYG

Add the following content field:

  • WYSIWYG: feature_demo

Once done, click on the “Create Component button and save the Component as “SaasFeaturesComponent:

Name the component SaasFeaturesComponent

Great! You’re done creating all the components and collections needed. Now, it is time to use these components and collections to configure the Page Type. 

Configuring the landing page

To create the Page Type, hover over the Content Types icon on the sidebar and click the "+" button next to "Page Type":

Select Page Types

Once redirected, let’s start by adding the SaasHeroComponent to the page. To do this, click on the book (Component Library) icon next to “Component”:

Select Component Library

This action will display a modal featuring all the available components. Locate and select the SaasHeroComponent:

Add SaasHeroComponent to page schema

Repeat the steps shown above and add another Component. This time, add the SaasFeaturesComponent. Now the page should have two Components:

Components added to the landing page schema

Once the Components are added, we will proceed to include a Repeater field, which we will utilize to reference our collections.

To begin, let's establish a section dedicated to the affiliated clients by crafting a Repeater with the subsequent schema:

  • Repeater: clientRepeater 

    • Reference: clientReference. One-to-Many relationship with the ClientCollection 

clientRepeater schema

Once done, click on the “Done” button. Then create another Repeater. This time name the repeater “quoteRepeater”:

  • Repeater: quoteRepeater. 

    • Reference: quoteReference. One-to-Many relationship with QuoteCollection

 quoteRepeater schema

Click on the “Done” button to save your Repeater. Then, click on the “Create Page Type button at the top right of the page and save it as “SaasLandingPageType”. You have successfully constructed the Page Type for the project. Now, let's proceed to populate the Page Type.

Creating a landing page using SaasLandingPageType

Next, you'll create a new page utilizing the Page Type as a template. To initiate this process, hover over the Pages icon on the sidebar and select the "+" button adjacent to "SaasLandingPageType":

Select Saaslandingpagetype to create a page using this page type

After redirection, you will be prompted to give a name to your page. Name the page "SaasLandingPage".

Adding content to the SaasHeroComponent

Next, for the SaasHeroComponent, add a background image by either uploading an image from your computer or selecting one from your ButterCMS media library. Add the text for the headline and subheadline. Then, click on the "Add reference" button beneath "featureReference". This will display a modal containing all the features we previously crafted using the featureCollection. Proceed to select all the items and then click the "Use Selected" button:

Select references then click Use Selected

This is what the SaasHeroComponent should look like on this page: 

Completed SaasHeroComponent

Adding content to the SaasFeatureComponent

Now, let's add content to the SaasFeatureComponent. To start, click on the “+ feature_list” button. After pressing the button, an item for the repeater will be created, then you can add content to the fields as shown below:

Add content to feature_list repeater

To add another item, click on the “+ feature_list button again. Please add a total of three feature_list items. Then drag and drop your media on the feature_demo section:

Add content to feature_demo

Adding content to the clientRepeater

Now, for the clientRepeater section, click on the “+ clientRepeater” button. This will show the “Add Reference” button, click on the button:

Add clientRepeater item them select Add Reference to add references

Clicking the button will open a modal with a list of all the clients we added to the clientCollection collection. Now, select all the items and click on the “Use Selected” button: 

Select clientRepeater items to reference

Adding content to the quoteRepeater

Next, repeat the steps above to add the quoteCollection collection items to the quoteRepeater. Once you are done adding the items, this is how the sections should look like: 

Add content to quoteRepeater

Creating the Laravel application

Now, let's dive into the exciting part—coding! In this tutorial, we'll be using Visual Studio Code as our integrated development environment (IDE). To work with Laravel, we'll employ PHP and Composer. To initiate a new Laravel project, open a new terminal window in VS Code and input the following commands:

composer create-project laravel/laravel ButterSaas 

The above command will generate a Laravel project named ButterSaas. After the project is successfully created, navigate to your root directory using the command:

cd ButterSaas 

To incorporate ButterCMS' PHP client into your project, open the composer.json file located in your root directory. Within the "require" field, append "buttercms/buttercms-php": "~2.4.0". Once this is done execute the following commands one by one in your terminal:

Composer update 
Composer Install 

With the Laravel application now configured, proceed to navigate to ButterApp\app\Http\Controllers and craft a new controller. Name the file LandingPageController.php and insert the following code into the file:

<?php




namespace App\Http\Controllers;




use ButterCMS\ButterCMS;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Config;
use Illuminate\View\View;




class LandingPageController extends Controller
{
    private static $apiToken = 'c3c37caed6eaa3141e464fc82cab8f83cae7925f';
    private $client;
    public function __construct() {
        $this -> client = new ButterCMS(LandingPageController::$apiToken);
      }




    public function showPage(string $type, string $pageSlug): View
    {
        $menuParams = [
            'page' => '1',
            'page_size' => '10',
            'locale' => 'es-es',
            'preview' => 1
        ];
        $menuCollection =  $this->client->fetchContentFields(['saasnavigationitems'], $menuParams);
       
<!-- Ensure to change the locale here too -->
        $params = [
            'locale' => 'es-es',
            'preview' => 1
        ];
        $page = $this->client->fetchPage($type, $pageSlug, $params);




        return view('landingPage', [
            'pageHero' => $page->getFields()['saasherocomponent'],
            'pageFeatures' => $page->getFields()['saasfeaturescomponent'],
            'pageClients' => $page->getFields()['clientrepeater'][0]['clientreference'],
            'pageTestimonials' => $page->getFields()['quoterepeater'][0]['quotereference'],
            'menus' => $menuCollection['saasnavigation'][0],
            'clientsHeader' => $page->getFields()['clientsheader'],
            'quotesHeader' => $page->getFields()['quotesheader'],
        ]);
    }




    public function showLandingPage(): View
    {
        return $this->showPage('saaslandingpagetype', 'saaslandingpage');
    }




    public function showLandingPageSlug(string $pageSlug): View
    {
        return $this->showPage('laravel_landing_page', $pageSlug);
    }
}

After adding your code, navigate to ButterSaas\resources\views, create a PHP file called landingPage.blade.php, and add the following code: 

<!doctype html>
<html lang="en">
  <head>
    <script src="https://kit.fontawesome.com/48764efa36.js" crossorigin="anonymous"></script>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap" rel="stylesheet">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">


    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Laravel CRM Saas</title>
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>








  </head>
  <body style="width: 100%;padding: 0%;">
 
    <nav class="transparent-navbar">
        <div class="logo">
            <img src="{{ asset('crm.png') }}" alt="Logo">
        </div>
        <ul id="navItems">
           @foreeach ($menus as $menuitem)
            <li><a href="{{$menuitem['urlslug']}}">              {{$menuitem['menuitem']}}</a></li>       
           @endforeeach 
         </ul>
    </nav>
   
               
        <div id="banner" style="background-image: url('{{ $pageHero['backgroundimage'] }}');  background-repeat: no-repeat; background-size: cover;background-position: center;">
                   
            <div id="heroText">
                <h1 id="heroHeadline">{{ $pageHero['headline'] }}</h1>
       
            </div>


            <p id="heroSubheadline">{{ $pageHero['sub_headline'] }}</p>


            <div id="heroFeatures">
            @foreach ($pageHero['featurereference'] as $heroFeatures)
                <div id="heroFeaturesInner">
                    <img src="{{$heroFeatures['icon']}}" alt="Component Icon" id="heroIcons">
                    {{$heroFeatures['description']}}
                </div>
            @endforeach
            </div>
               
                   
        </div>
       
        <div id="featuresSection">
               
            <div id="features_list">
            @foreach ($pageFeatures['feature_list'] as $featureList)
                <div id="features_heading">
                {{$featureList['heading']}}
                </div>
                <div id="features_description">
                {{ $featureList['description'] }}
                </div>
            @endforeach
            </div>
               
            <div id="features_demo">
                {!!$pageFeatures['feature_demo']!!}
            </div>
        </div>


        <div id="clientsSection">
            <div id="quote_heading">
               {{$clientsHeader}}
            </div>
            <div id="client_logos">
                @foreach ($pageClients as $clientlogo)
                   
                    <img src="{{$clientlogo['icon']}}" alt="Component Icon" class="clientIcons">
               
                @endforeach
            </div>
        </div>
       
        <div id="quoteSection">
            <div id="quote_heading">
            {{$quotesHeader}}
            </div>
            <div id="card_container">
            @foreach ($pageTestimonials as $quote)
                <div id="card">
                   
                    <div id="quote">
                        <div>
                        <b>"</b>{{$quote['quote']}}<b>"</b>
                        </div>
                        <div>
                        <p style="font-size: 10px;margin: 5px;"><b>~</b> {{$quote['full_name']}} </p>
                        </div>
                    </div>
                    <div id="quote_img">
                        <img src="{{$quote['image']}}" alt="Component Icon" id="quoteIcons">
                    </div>
                   
                </div>
                @endforeach
            </div>
        </div>
       
    <!-- Optional JavaScript; choose one of the two! -->
 
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
   
  </body>
</html>

Then navigate to ButterSaas\routes, open the web.php file, and add the following code:

<?php


use App\Http\Controllers\LandingPageController;
use Illuminate\Support\Facades\Route;


Route::get('/', [LandingPageController::class, 'showLandingPage'])->where('slug', '.*');

To add your assets, navigate to the public folder and create a CSS folder. Under the folder, create a CSS file called style.css and add the following code to it: 

.transparent-navbar {
   
    background-color: rgb(191, 229, 252);
    position: fixed; /* Keeps the navbar fixed in its position */
    height: 70px;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100; /* Ensure the navbar stays on top of the content */
    display: flex;
    align-items: center; /* Align logo and links vertically */
    color: black;
}


.logo {
    margin-left: 20px; /* Adjust the logo's position */
}
#navItems{
    margin-left: 400px;
    font-size: larger;
    color: black;
}
.logo img {
    height: 40px; /* Adjust the height of the logo */
}


.transparent-navbar ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}


.transparent-navbar li {
    margin: 0 10px;
}


.transparent-navbar a {
    text-decoration: none;
    color: black;
    font-size: 20px;
    padding: 10px;
    font-family: sans-serif;
}
#banner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 670px;
    font-family: sans-serif;
}


#heroText{
    text-align: center;
    margin-top: 140px;
    width: 60%;
}


#heroSubheadline{
    font-size:larger;
    line-height:.8rem;
    margin-top: 70px;
    font-family: sans-serif;
    font-weight: bolder;
}


#heroFeatures{
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 7em;
    letter-spacing: -.05ch;
    margin-left:auto;
    margin-right:auto;
    background-image: linear-gradient(to bottom, rgb(191, 229, 252), white);
    align-items: baseline;
    margin-top: 70px;
    border-radius: 30px;
    padding: 20px;


}


#heroFeaturesInner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-self: center;
    align-items: center;
    flex-wrap: nowrap;
   
}


#heroIcons{
    padding-bottom:25px ;
    border-radius:.3rem.3rem 0 0!important;
    width: 100px;
    height: 100px
   


}


#featuresSection{
display: flex;
flex-direction:row;
background-color: white;
width: 100%;
padding: 10px;
font-family: sans-serif;
}
#features_list{
display: flex;
flex-direction: column;
width: 30%;
padding: 10px;
margin-left: 40px;
font-family: sans-serif;
}
#features_heading{
    margin: 5px;
    font-weight: bolder;
    color: black;
    font-size: xx-large;
    text-align: center;
}
#features_description{
    text-align: center;
    color: grey;
    margin: 5px;
}
#features_demo{
display: flex;
width: 50%;
padding: 20px;
}


#clientsSection{
    height: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#client_heading{
    color: black;
    font-size: xx-large;
    margin: 10px;
}


#client_logos{
    margin: 10px;
    overflow: hidden; /* Hide the horizontal scrollbar */
    white-space: nowrap;
    width: 100%;
}
.clientIcons{
    padding-bottom:25px ;
    border-radius:.3rem.3rem 0 0!important;
    width: 100px;
    height: 100px;
    margin: 20px;
    display: inline-block;
    margin: 0 10px;
    max-height: 100px;
    animation: scrollAnimation 10s linear infinite;
   
}
@keyframes scrollAnimation {
    0% {
        transform: translateX(0); /* Start position: no translation */
    }
    100% {
        transform: translateX(-100%); /* End position: translate 100% left */
    }
}




#quoteSection{
    display: flex;
    flex-direction: column;
    height: 400px;
    background-color: rgb(255, 255, 255);
    width: 100%;
    align-items: center;
    padding: 20px;
}
#quote_heading{
    color: black;
    font-size: xx-large;
    margin: auto;
    font-weight: bolder;
}


#card_container{
    display: flex;
 
    width: 100%;
}


#card{
    border-radius: 20px;
    width: auto;
    background-image: linear-gradient(to bottom, rgb(191, 229, 252), white);
    display: flex;
    flex-direction: row;
    padding: 20px;
    align-items: center;
    margin: 10px;
    height: 200px;
}


#quoteIcons{
    padding-bottom:25px ;
    border-radius:.3rem.3rem 0 0!important;
    width: 100px;
    height: 100px;
    margin: 20px;
    background:#fff;
    box-shadow:-8px -7px #f9fafb;
}

Translating the landing page with DeepL

Now, hover over the Pages icon, and then click on "SaasLandingPageType":

Select SaasLandingPageType

After being redirected to the page, click on "SaasLandingPage" to access the page we've created. You'll now notice a DeepL button on the page. Clicking this button will prompt a pop-up window with additional instructions. Select the radio button next to the Spanish locale, and then click on the "Translate" button:

Select Spanish then click Translate to translate the page

After clicking the "Translate" button, a copy of the original English page will be translated into Spanish. You'll then have the ability to switch between the languages using the dropdown menu that presents the current language:

The languages this page is available in

The key to accessing the English or Spanish version via the API will depend on the value of a parameter named 'locale', set to 'en-us' for English and 'es-es' for Spanish.

Since we have already translated our Collections, when you translate the SaasLandingPage page, the Collections featured on the page will be automatically translated into Spanish along with the entire page. However, if you do not translate the Collections before translating the Page they are featured in, the collections will turn out empty since they lack an independent Spanish version.

Previewing the SaasHeroComponent translation

The content of the SaasHeroComponent is defined on the SaasLandingPage and references the FeaturesCollection. Here's how the English version appears:

SaasLandingPage english version (pt.1)

SaasLandingPage English version (pt. 2)

After the page is translated into Spanish, this is the translated version will look like (click Spanish on the drop-down menu to view it): 

SaasLandingPage Spanish verison (pt. 1)

As you can observe, the heading and subheading items have been accurately translated. As you scroll down, you will notice that the items on the FeatureReference, which make references to items in the FeaturesCollection, are automatically translated. This occurs because we translated the items within the Collections beforehand:

SaasLandingPage Spanish version (pt. 2)

Previewing the SaasFeaturesComponent translation

Let's have a look at how effectively DeepL translated the content within the SaasFeaturesComponent. To achieve this, we can analyze the initial content present in this component. Here is the English version for reference:

Saasfeaturescomponent in English

After translation, this is the Spanish version:

Saasfeaturescomponent Spanish version

Again, the translation is pretty much flawless. Without making a single edit, the translated version captures the context of the original version well. 

Learn how ButterCMS can streamline your content management.
Start a free trial

Viewing the translation on the frontend

Now, let's observe how the translation functions on the front end. To launch your web application in the browser, navigate to the root directory of your project in Visual Studio Code and execute the following command in the terminal:

php artisan serve

Once this command is executed, press and hold "Ctrl" and click on the link provided. This will redirect you to the web application in your browser.

Here's how the page appears with the English locale in effect:

Rendered English SaasLandingPage

Now, go back to your ButterCMS portal, click on the locale dropdown, and select Spanish:

Select Spanish

Once changing the locale to Spanish, click the “Publish button to publish the Spanish version on the website. After publishing, this is how the website looks like this:

Rendered Spanish SaasLandingPage

That’s it! You have successfully translated your website. You can follow the same steps if you wish to translate the content into languages other than Spanish. Please remember that DeepL is intended to optimize your translation workflows rather than completely replace them.

Additionally, please be aware that the translation will not be functional unless you modify the locale in your request within the ShowPage function in the LandingPageController.php file:

 $params = [
            'locale' => 'es-es',
            'preview' => 1
        ];
        $page = $this->client->fetchPage($type, $pageSlug, $params);

This locale parameter functions as a toggle for the desired content locale to be retrieved. The provided code above employs the Spanish locale code. However, if you wish to revert to English, remember to modify the 'locale' value to 'en-us' in your code as well.

Final thoughts

Congratulations on reaching the conclusion of this tutorial! The synergy between ButterCMS and Laravel is truly remarkable, simplifying the process of defining ButterCMS objects and integrating them into Laravel. This tutorial aimed to guide you through the process of translating your content using DeepL. DeepL streamlines content translation through a one-click button and a single line of code. What's also noteworthy about DeepL's integration into ButterCMS is its ability to navigate through objects in Collections, allowing you to selectively decide what to translate. This user-friendly feature makes it effortless to make necessary edits.

To learn more about how you can Localize your content with ButterCMS check out the tutorials below:

Make sure you receive the freshest tutorials and Butter product updates.
Levis Masonde

Levis Masonde is a software developer with a passion for coding in React Native and Python as well as keeping up with new innovations with plans to raise awareness of programming.

ButterCMS is the #1 rated Headless CMS

G2 crowd review award G2 crowd review award G2 crowd review award G2 crowd review award G2 crowd review award G2 crowd review award G2 crowd review award G2 crowd review award G2 crowd review award G2 crowd review award G2 crowd review award G2 crowd review award

Don’t miss a single post

Get our latest articles, stay updated!