GSD

How to Build Compelling Laravel Landing Pages with ButterCMS

Posted by Levis Masonde on October 6, 2023

According to Forbes, the average human attention span is around 47 seconds. If you have a product or service you are offering, you must ensure that you grab the user’s attention as soon as possible and provide them with a direct path to make a purchase or query by clearly stating important information. 

The main purpose of a landing page is to drive conversions using CTAs, such as with free trials, contact information, or promotions. For example, Google focuses on providing search functionality as its primary service, reflecting this emphasis by featuring a single key element on its landing page—the search bar. This design approach ensures an effective and streamlined user experience, directing users directly to the service they are seeking. 

To create a landing page, you will utilize Laravel, a PHP web application framework, along with ButterCMS as a content management tool. You will be creating a hotel landing page to drive a campaign showing your popular bookings and the promotions you're currently running as well as reviews from your customers. 

Understanding Laravel 

Laravel is a free and open-source PHP framework for web applications. It makes use of controllers, routes, and views—also known as MVC architecture—to create dynamic web applications with separate logic for the backend and front-end. The controller initiates the application by making requests to the backend (servers) or acquiring local data and then passes the results to a view. The view file will have Blade as an extension. 

Blade is Laravel's powerful templating engine that provides features like template inheritance, conditional statements, loops, and more. The following are reasons you should consider using Laravel to create your landing page application:

  • Front-end design: The views are mainly created with HTML; Blade makes it easy to incorporate your PHP code into your HTML code. So as a developer, you do not need to learn another language to create a great front-end.  

  • Routing: Laravel makes it easy to route your application by isolating the routing logic plus uses simple syntax to tie a controller and its functions to routes on your application. 

  • MVC architecture: Laravel follows the Model-View-Controller (MVC) architectural pattern, which promotes the separation of concerns and enhances code organization.

  • Security: Laravel prioritizes security and incorporates features like protection against cross-site scripting (XSS), cross-site request forgery (CSRF), and SQL injection attacks. It also provides a secure way to handle user authentication and authorization. 

  • ORM and database migration: Laravel's ORM simplifies database interactions by providing an intuitive and expressive syntax. It supports relationships, eager loading, query building, and more. Additionally, Laravel's database migration feature allows for seamless database schema changes and version control. 

See how ButterCMS melts into your Laravel app in minutes

Powering your landing page with ButterCMS 

ButterCMS is an API-driven content management system—it powers your application’s backend in the cloud. This means you can run a range of applications without having to worry about server hardware, software updates, backups, and uptime. ButterCMS can help you quickly add blog and market site capability to any tech stack and since it is SaaS, it is only responsible for hosting and maintaining the CMS API (data) and a dashboard.    

It is simple to configure and control your content using ButterCMS’ dashboard. The dashboard has features like blog posts, pages, collections, and content types. Content types include components, page types, and collections. You can configure your pages and collections using content fields. These content fields help you compose dynamic page layouts and easily reorder them without coding. 

If you are a marketer, you will have the freedom and flexibility you need to create compelling, unique content experiences with pages built using components.  You and your team can define a library of reusable, custom components that you can use to create limitless kinds of experiences.

In this tutorial, you will be using components to build dynamic pages on your ButterCMS account. Content fields used include short and long text fields for text content, a repeater field for any combination of one or more content fields that can be repeated multiple times within a page, and a media field for images. The component picker field allows you to build dynamic landing pages by choosing from multiple components that can easily be reordered. 

Tutorial: Creating a Laravel landing page with ButterCMS

In this tutorial, you will use ButterCMS to create a structure for your application’s content backend. You will utilize ButterCMS’ components feature to create separate components for your landing page. After creating the ButterCMS page, you will create a Laravel application and use ButterCMS’ API to integrate the two applications.  

Creating your landing page 

To build your landing page, you will start by creating the content structure in your ButterCMS portal. 

Creating components for our landing page sections

Log in to ButterCMS and start by creating your components. To do this, hover over Content Types and click on Components, as shown below. 

Select components from content types menu

Once redirected, hover over the New Content Type button and select Component  

Select New Content Type button and then select Component from the drop down menu

First, you will be creating a component for the Hero section. Add the following content fields with their field names: 

  • Short text: Headline 

  • Long text: Sub-Headline 

  • Media: Image 

  • Short text: Button Label 

  • Short text: Button URL 

  • Short text: Scroll anchor ID 

This is how the complete schema looks like in the ButterCMS portal:

Laravel_Hero component configuration

After creating your fields, click on the Create Components button and save the component as Laravel_Hero, as shown below.

Name component Laravel_Hero

After creating the Laravel Hero component, you need to create another component for the Accommodation section and the Promos and Offers section. Add the following content fields to the schema:  

  • Short text: Title

  • Repeater: Features

    • Short text: Name

    • Long text: Description 

    • Media: Icon

    • Short text: Additional

The Laravel_features component will have a repeater named Features with content fields which every feature should have:

Laravel_features component configuration

Save the new component as Laravel_Features.  This component demonstrates how you can use one component for different sections of your page if the sections have the same structure.

After you save this component, create another component for a section to display an image next to columns reflecting your services section and add the following fields: 

  • Short text: Heading 

  • WYSIWYG: Sub-heading 

  • Media: Image 

  • Drop-down: Image position 

  • Short text: Button label 

  • Short text: Button URL 

  • Short text: Scroll anchor ID  

Save the component as Laravel Two Columns with Images.  

After you save this component, create another component to contain client testimonials and add the following fields: 

  • Short text: Headline 

  • Repeater: Testimonials 

    • Long text: Quote

    • Short text: Name 

    • Short text: Title 

Save the component as Laravel Testimonials. 

Creating our landing page using the components we’ve built

Now you must create a page in your ButterCMS portal. You can create a page by hovering over the Page icon and clicking Page on the pop-up, as shown below:

Select Pages from the side menu

Once on the Pages page, click on the New Page button. 

Select New Page button to begin configuring a new page

Once on the New Page page, add the components you created by clicking on the Book icon next to Component, as shown below:

Select the Component Library

After clicking on the book button, you will see a modal where you can select a component from your Component Library. The first component added to the page is the SEO component.

Add the SEO component to the page schema

After adding the first component, you will then use the Component Picker element to group components together.

Add the Component Picker to the page schema

Here is the list of components to be added to the Component Picker:

  • Laravel_Hero

  • Laravel Two Column with Image

  • Laravel Testimonials

  • Laravel_features

  • Laravel_features

  • Contact us

After clicking on the Component Picker, thereby adding it to the schema, name it “Body”:

Name the component picker Body

Since we’ve already created the components, click on the Add from Library button to add the components from the Component Library modal:

Add Laravel_hero to the component picker

The first component in the Component Picker is Laravel_Hero:

Laravel_Hero component added to the Body component picker

Click on the Add from Library button again to add the Laravel Two Column with Image Component and then add the rest of the components in the list above. 

Note that the Laravel_features component is used twice but for different content—the components will be separated by their titles on the front-end. This is how the repeater schema looks like in ButterCMS:

List of components added to the Body picker

Note that the Laravel_features and Laravel Testimonials components make use of the repeater content field. This will help you group content which will be repeated.

After adding your components, go to the top of the page and save the page with the name laravel landing page

Great! You are done with the schema of your page. Next, you will be adding content to the page you have created.

Populating the page with content

After creating the page, to populate your page with content, hover over the Pages icon on the sidebar and click on the (+) icon next to the newly created laravel landing page:

Select laravel landing pages from the Pages menu

First, add content to the SEO component:

Add content to the SEO component fields

After adding the content to the SEO component, let’s add content to the Component Picker named “Body”. For our page’s body, the first section to build is the Hero section. You will build this section using the Laravel_Hero component. To add the component,  click on the Component Picker button:

Select the component picker to add components

Clicking this button will pop up a modal with the components created in the last section. Select Laravel_Hero:

Add laravel_hero component to the page

This will add the component to the Component Picker. Since we have not yet added content to the component, it will have the description “Empty”:

Empty Laravel_hero component

Click the Laravel_Hero component, this will expand to enable you to add content:

Empty laravel_hero component expanded to view empty fields

To add content for the Headline and Sub-Headline, you simply need to click on the text input fields below them. To add the image, simply drag the image from your PC and drop it on the media input. After adding your content, this is how Laravel_Hero should look like:

Add content to the hero component

The next component on the list is Laravel Two Column with Image. Click on the Component Picker button and select Laravel Two Column with Image:

Use the picker to add the two column component to the page

After adding the component, click on the component and add content:

Add content to two columns component

After adding content to the Laravel Two Columns with Image component, the next component to add content to is the Laravel Features component. The Laravel Features component will be used to create two sections: the Accommodations section and the Promos and Offers section. First, let's create the Accommodations section.

Click on the Component Picker button:

Select the component picker again

In the pop-up modal, select Laravel_features:

Select Laravel_features

After adding the component, click on it to expand it:

Empty Laravel_features component

Since you are using this component for the Accommodations section, the Title will be “Accommodations”.  This will be helpful when distinguishing between sections using the same component. 

Now to add content to the repeater, click on the + Features button. This is the repeater named “Features” we defined in the last section: 

Name features component Accommodations

After clicking on the button, a new item will be shown under the Features repeater, as shown below:

Blank accomodations repeater item

After adding your content, the populated item should look like this:

Add content to the repeater item

To add more items to the repeater, simply click on the + Features button again:

Add another repeater item to accommodations by selecting the features+ button

This will add another empty item to the repeater for you to populate. Repeat the steps to add more items to the Features repeater. Here is all the content added to the Accommodations section:

List of accommodations repeater iteams

Next, let’s create the Promos and Offers section using the Laravel_Features component. The Laravel_features component was also used for the Accommodations section, but the Title content field will be used to distinguish between the two sections. 

Click on the Component Picker button and, from the modal, select Laravel_Features again:

Select Laravel_features

Once the component is added, click on it to expand it to start adding content to it. Since this component will be used for the Promos and Offers section, the Title will be “Promos and Offers”:

Name component Promos and Offers

To start adding content to the Features repeater, click on the + Features button, and after adding content to the first repeater item, click on the + Features button to add more items: 

Add content to the promos and offers feature repeater item

After adding all the items, the Laravel_features component for the Promos and Offers section should look like this:

Completed promos and offers section

Now, let’s use the Laravel Testimonials component to create the Testimonial section of the page. Click on the Add Component button:

Select the add component button

From the modal, select Laravel Testimonials:

Select the laravel testimonials component

After selecting the component, click on it to start adding content to it. You first had to add the headline and then click on the + Testimonials button to add a repeater item:

Enter the headline then select + Testimonials to add repeater items

This is to create a new item for the repeater for us to populate. Add content to the first item, and click the + Testimonials button again to add more items to the repeater:

Add content to testimonial repeater item

After adding your items, scroll down and add the image. This image will be used as the background image for the testimonials:

Add more testimonial items and a background image for the component

Lastly, for the Contact Us section, make use of the Contact Us component. Click on the Add Component button as shown previously and select the Contact Us component from the modal. After adding the component, click on the component and add content to it. 

Add content to the contact us component

After populating your page with content, publish the page by going to the top of the page and clicking the Publish button. It is now time to start creating the Laravel application. 

Creating the Laravel application

This tutorial creates the application using a simple and straightforward method. For a more detailed and complex template (i.e., for advanced Laravel developers), you should follow this GitHub repo.

This tutorial uses Visual Studio Code as the code editor. To work with Laravel, we will use PHP and Composer. Create a new Laravel project using the following command on your command line: 

composer create-project laravel/laravel ButterApp 

To add ButterCMS to your project, go to your project directory, open the composer.json file and under the "require" field, add "buttercms/buttercms-php": "~2.4.0". Once done, run the following commands on your terminal:

Composer update 
Composer Install 

After the Laravel application is set up, navigate to ButterApp\app\Http\Controllers and create a new controller. Name the file PageController.php and add the following code to the file: 

<?php


namespace App\Http\Controllers;


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


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


    public function showPage(string $type, string $pageSlug): View
    {
        $page = $this->client->fetchPage($type, $pageSlug);


        return view('page', [
            'pageSeo' => $page->getFields()['seo'],
            'pageBody' => $page->getFields()['body'],
        ]);
    }


    public function showLandingPage(): View
    {
        return $this->showPage('laravel_landing_page', 'laravel-components-landing-page');
    }


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

After adding your code, navigate to ButterApp\resources\views and create a PHP file called page.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>{{ $pageSeo['title'] }}</title>
    <meta name="description" content="{{ $pageSeo['description'] }}">
    <link rel="stylesheet" href="{{ asset('css/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/owl.theme.default.min.css') }}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>




  </head>
  <body style="width: 100%;padding: 0%; background-color: #f4f1ed;">
 
       
        @foreach ($pageBody as $section)
               
        @if ($section['type'] === 'laravel_hero')
        <div id="banner" style="background-image: url('{{ $section['fields']['image'] }}');  background-repeat: no-repeat; background-size: cover;background-position: center;">
                    <div id="signup" style="background-color: rgba(0, 0, 0, 0.4);">
                        <div id="S_top">
                            <h1 id="welcomeText1">{{ $section['fields']['headline'] }}</h1>
                             <p id="welcomeText">{{ $section['fields']['sub-headline'] }}</p>
                        </div>
                        <div id="S_bot">
                            <div class="custom-bg-6">
                               <a href="{{ $section['fields']['button_url'] }}" style="text-decoration: none;color:inherit;"> <h4 >{{ $section['fields']['button_label'] }}</h4> </a>
                            </div>
                        </div>
                    </div>
        </div>
        <div id="slide">
        @elseif ($section['type'] === 'laravel_two_column_with_image')
            <div id="TwoColumns">
                <div id="Tleft">
                    <h2>{{ $section['fields']['heading'] }}</h2>
                    <h6>{!! $section['fields']['sub-heading'] !!}</h6>
                </div>
                <div id="Tright">
                    <img src="{{ $section['fields']['image'] }}" alt="Two Column Image" style="width:250px;height:380px;">
                </div>
            </div>
        </div>
        @elseif ($section['type'] === 'laravel_features')
          @if ($section['fields']['title'] === 'Accomodations')
          <h1 class="featureHeading">{{$section['fields']['title']}}</h1>
        <div class="features">
           
            @foreach ($section['fields']['features'] as $feature)
                <div class="featuresInner">
                    <div id="fTop">
                        <img src="{{ $feature['icon'] }}" alt="Component Icon" style="width:260px;height:160px">
                    </div>
                    <div class="fBottom">
                        <p>{{ $feature['description'] }}</p>
                        <h4>{{ $feature['name'] }}</h4>
                        <p>{{ $feature['additional'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
         @endif  
       
         @if ($section['fields']['title'] === 'Promos and Offers')
         <h1 class="featureHeading">{{$section['fields']['title']}}</h1>
        <div class="features">
           
            @foreach ($section['fields']['features'] as $feature)
                <div class="featuresInner">
                    <div id="fTop">
                        <img src="{{ $feature['icon'] }}" alt="Component Icon" style="width:260px;height:160px">
                    </div>
                    <div class="fBottom">
                        <h4>{{ $feature['name'] }}</h4>
                        <p>{{ $feature['description'] }}</p>
                        <p>{{ $feature['additional'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
           
         @endif
            @elseif ($section['type'] == 'laravel_testimonials')


           


            <div id="testimonials" style="background-image: url('{{ $section['fields']['image'] }}');  background-repeat: no-repeat; background-size: cover;background-position: center;">
               
            <div id="Theads">
                    <h2>{{ $section['fields']['headline'] }}</h2>
                </div>
                <div id="testimonials-carousel">
                @foreach ($section['fields']['testimonials'] as $testimony)
                    <div class="testimonial-item">
                    <h5>{{ $testimony['quote'] }}</h5>
                    <p style="margin-top:5px">{{ $testimony['name'] }}</p>
                    <p>{{ $testimony['title'] }}</p>
                    </div>
                @endforeach
                </div>


            </div>
           
            @elseif ($section['type'] == 'contact_us')
            <div id="contactUs">
                <h2 style="text-align:center">Contact Us</h2>
                <div id="firstBlock">
           
                    <h6>{{ $section['fields']['number'] }}</h6>
                    <h6>{{ $section['fields']['email'] }}</h6>
                    <h6>{{ $section['fields']['address'] }}</h6>


                </div>
                <div  id="secBlock">


                </div>
           


            </div>


            @endif    
               
       
    <!-- 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>
   
    @endforeach


   
  </body>
</html>

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

<?php


use App\Http\Controllers\BlogController;
use App\Http\Controllers\PageController;
use Illuminate\Support\Facades\Route;


/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/




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

See how ButterCMS melts into your Laravel app in minutes

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: 

#right{
 
    width: 25%;
    align-items: center;
    align-self:flex-start;
  }
  #center{
    background-color: rgb(173, 216, 230, 0.0009);
    width: 50%;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    align-self:flex-start;
    padding: 3px;
    justify-content: center;
    margin-top: 20px;  
  }
  #left{
   
    width: 25%;
    align-self:flex-start;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 20px;  
   
  }
  .navigation{
    position: fixed;
    padding-top: 50%;
    display: flex;
    flex-direction: row;
    width: 100%;
    height:100px;
    padding: 5px;
    background-size:contain; /* Adjust background image size */
    background-position: center; /* Adjust background image position */
    background-color: #0e1a29;
 
  }


  #testimonials-carousel{
    width: 100%;
    height:fit-content;
   display: flex;
   flex-direction: row;
    color: #0e1a29;


  }
  #Theads{
   text-align: center;
   color:#f4f1ed;
    width: 100%;
    font-size: 90px;
   font-weight: bold;
    margin: 1%;
    margin-top: -55px;
 
  }
#testimonials{
  width: 100%;
  height: 670px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color:#0e1a29;
  padding: 2%;
}
 
.testimonial-item{
  background-color: rgb(14, 26, 41, 0.3);
  justify-content: center;
  display: flex;
  flex-direction: column;
  border-radius:3%;
  padding: 2%;
  color: #ADD8E6;
  margin: 10px;
}
#contactUs{
  width: 100%;
  height: 260px;
  background-color:#623e2a;
  color: #ADD8E6;
  padding: 3%;
}
#firstBlock{
  border: #f4f1ed 1px solid;
  width: 20%;
  padding: 10px;
  font-size: medium;
 
}
  .col{
    padding: 10px;
    text-decoration: none;
    color: #ADD8E6;
  }
  #navContainer{
    width: 100%;
    background-color: #0e1a29;
  }
  .container{
    width: 100%;
   
  }
  .body{
    width: 100%;
    background-color: rgb(173, 216, 230, 0.3);
  }
  #image{
    float: right;
    width: 600px;
    height: 432px;
    margin-right: 30px;
  }
  #banner{
    width: 100%;
 
    height: 670px;


  }


#signup{
    color: #ADD8E6;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #1d8b1d;
}
#S_top{
 
  justify-content: center;
  text-align: center;
  margin-top: -90px;
}
a {
 
  text-decoration: none; /* no underline */
  }
#welcomeText{
  font-size: 60px;
  font-family:Gabriola
}
#welcomeText1{
  font-size: 80px;
  font-family:Gabriola
}
#S_bot{
  width: 100%;


  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}
.custom-bg-6 {
  background-color: #0e1a29; /* Light green */
  margin: 5px;
  width: 20%;
  border: #ADD8E6 2px solid;
  padding: 10px;
  text-decoration: none;
  color: #ADD8E6;
  text-align: center;
}
#slide{
  background-color: #f4f1ed;
  width:100%;
  color: #623e2a;
  margin: 0px;
}
#TwoColumns{
  display: flex;
  flex-direction: row;
  padding: 2%;
  background-color:#f4f1ed;
  margin-left: 8%;
}
#Tleft{
  justify-content: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  width: 50%;
  margin-left: 20px;
 
}
#Tright{
  width: 40%;


  justify-items: center;
  text-align: center;
}
.features{
  display: flex;
  flex-direction: row;
  align-content: space-between;
  align-items: normal;
  background-color: #f4f1ed;
  width: 100%;
  justify-content: center;
  margin-top: 0px;
}
.featuresInner{
  display: flex;
  flex-direction: column;
  width: 20%;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 20px;
  margin-left: 20px;
  color: #623e2a;
 
}
.featureHeading{


  text-align: center;
  margin-top: 25px;
  background-color: #f4f1ed;
  padding: 10px;
  font-weight: bolder;
  color: #623e2a;
  margin-bottom: 0px;
}
.fBottom{
  border: #623e2a 1px solid;
  margin: 10px;
  padding: 5px;


}
.title {
    font-weight: 900;
    display: inline-block;
    width: 100%;
}
.subtitle {
    font-weight: 100;
    line-height: 1.25rem;
}
.subtext {
    font-size: 1.1167rem;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1.25rem 1rem;
    width: 100%;
    white-space: initial;
    letter-spacing: 0;
    box-sizing: border-box;
    font-weight: 400;
}
.icon {
    font-size: 1rem;
    line-height: 1rem;
    display: block;
    padding: 0 0 0.5rem 0;
}
canvas {
    position: absolute;
    top: 0;
    left: 0;
}
h1 {
    font-size: 2.5rem;
    color:#ADD8E6;
    margin: 0;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

Running your application locally

To run your Laravel application on your localhost, navigate to your terminal and ensure that the terminal is on your application’s directory by running the following commands:

Cd app_name
php artisan serve

By default, PHP will host the application at 127.0.0.1:1800. Hold control and click on the link to get directed to the web application on your default browser. 

The results

The resulting web application is as shown below: 

Laravel landing page walkthrough

Creating a landing page is a great way to convert users on the internet into your customers. You want to ensure that the landing page has a specific agenda guiding the user to the same endpoint. The landing page above simply shows the user different accommodations available as well as the pricing. After that, the user is offered promotions and membership. 

Rearranging your components  to create an altered experience

You can rearrange the structure or layout of your web application’s front-end by rearranging your ButterCMS page’s structure. You may find the need to rearrange your layout depending on your use case. For example, if the user is searching for reviews on hotels, it would be advantageous to elevate the testimonials section higher on the front-end. To do this, navigate to the pages and rearrange the components by clicking and holding a component and moving it over to the position you desire, as shown below:

Rearranging components via drag and drop

After rearranging the components, click on the Publish button to publish your new structure. Then, run your Laravel site again by going to your terminal, ensuring you are at the root directory of your application, and running the following command:

php artisan serve

Follow the link to your localhost on your browser and view the front-end again. 

Altered laravel landing page walkthrough

As you can see, the layout of the front-end has changed to reflect the changes made on the ButterCMS page. This means you can change how your web application looks by simply dragging and dropping the components in your ButterCMS portal. 

Final thoughts 

Congratulations on making it to the end of the tutorial! Using Laravel to create a web application ensures that the application is secure and easy to manage without having to learn any other programming language except PHP. The PHP code is further simplified with the Blade engine. You should also take time to learn Laravel best practices for developers.

Laravel and ButterCMS work well together since you can mirror ButterCMS’ backend structure with your Laravel front-end structure. Using ButterCMS’ page types to divide different sections in your Laravel application, plus Laravel’s routing system, compliments ButterCMS’ API approach and makes it easier to route your application in relation to your APIs. 

To learn more about how you can use ButterCMS with Laravel, check out the following tutorial:

Make sure you receive the freshest Laravel 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!