Kinsta®

How To Make Beautiful Pages Using Tailwind CSS and Laravel

Marcia Ramos — Mon, 31 Jul 2023 17:09:32 +0000

Every Laravel website can use some style, and Tailwind CSS is the easiest way to give your site some flair. This utility-first CSS framework offers predefined classes to style your HTML elements. Instead of writing endless CSS code, you can build custom web pages quickly and then easily maintain and scale your stylesheets.

Tailwind is part of the TALL stack, along with Alpine.js and Livewire. The Laravel community built this full-stack development solution to help developers of all skill levels quickly prototype web applications. These solutions are easy to use without deep knowledge of front-end or back-end technologies.

This hands-on article explores how to use Tailwind CSS to spice up your Laravel project, then deploy it using MyKinsta.

Enhance Your Laravel Project Using Tailwind

To get started, create a basic Laravel page, then use Tailwind CSS to style it with minimal effort.

Prerequisites

To follow along with the tutorial, you need:

Laravel and Composer installed.
Node.js and npm installed.
MyKinsta account for deployment. If you don’t already have an account, sign up for a free trial.

To see the final project, check out the complete project code.

Laravel Project and Set Up Tailwind

To create a new Laravel project using Composer:

Open the terminal to the directory where you want the project to live and run:

composer create-project laravel/laravel my-project

Go to the my-project directory to install the required packages:

cd my-project

Install the packages to work with Tailwind:

npm install -D tailwindcss postcss autoprefixer

Run the following command to set up Tailwind’s configuration files:

npx tailwindcss init -p

This action places two files at your project’s root: tailwind.config.js and postcss.config.js.

Configure Your Template Paths

Next, configure your template paths in the tailwind.config.js file. Laravel looks for CSS files in the public directory by default. The template path tells Laravel where to find the application’s CSS files.

Replace the code inside the tailwind.config.js file with this:

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}

Add the Tailwind CSS Directives To the Project’s CSS

To add the directives for Tailwind CSS, go to the resources/css folder and open the app.css file.

Then, add the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

Build the Application

Before running your app locally:

Launch the Vite development server:

npm run dev

This command bundles your static assets file, including Tailwind CSS, and starts the Vite local server.

Use Artisan to run your Laravel app:

php artisan serve

Your app should now be running at http://127.0.0.1:8000/. It displays the default output of a newly created Laravel application.

Upon opening the resources/views/welcome.blade.php route view file, you can see that it already uses Tailwind utility classes.

How To Make a Simple Tailwind Component

To understand better how Tailwind works:

Open resources/views/welcome.blade.php.

Delete the code from the application’s welcome view.

Replace it with the code below, which renders a beautiful card component:



  
    
    
    
      @vite('resources/css/app.css')
    Document
  
  
    
      
      
        This is My Blog Title
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque,
                exercitationem praesentium nihil.

The code above uses Vite to import the app.css file via @vite('resources/css/app.css'). It also imports Tailwind. It creates a fundamental markup component to mock up a blog card using these Tailwind CSS utility classes:

max-w-sm — Sets the maximum width of the container to the sm (small) breakpoint size.
m-24 — Adds a margin of 24 units (96px or 6rem) to all sides of the container.
rounded — Adds a border-radius to make the container’s corners rounded.
overflow-hidden — Hides any content that overflows the container.
shadow-lg — Adds a shadow effect to the container.
w-full — Sets the image width to 100% of its container.
px-6 py-4 — Adds padding of 6 units (24px or 1.5rem) on the x-axis and 4 units (16px or 1rem) on the y-axis.
font-bold — Sets the text’s font-weight to bold.
text-xl — Sets the text’s font-size to extra-large.
mb-2 — Adds a bottom margin of 2 units (0.5rem or 8px) to the element.
text-gray-600 — Sets the text color to dark gray.
text-base — Sets the text’s font size to the default.

When you preview your application in the browser, you should see an output similar to the one below.

Sample component on a web page

Deploy Your Laravel Tailwind Project to Kinsta

Before deploying and hosting your Laravel application using Kinsta, make a few more changes to ensure it properly works when hosted.

Open app/Http/Middleware/TrustProxies.php. Change the value of protected $proxies to enable your Laravel app to trust all proxies:

protected $proxies = '*';

Create a new .htaccess file in your project root directory and paste the following code:


  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]

Create a new Git repository and push your code to it (Kinsta supports pushing from GitHub, GitLab, and Bitbucket).

Sign in to your Kinsta account or create a new one. Once on your MyKinsta Dashboard, click the Add service button, then select Application, like the screenshot below.

Adding an application on MyKinsta

MyKinsta prompts you to connect your Git account. Complete the authorization as requested, then select the project you previously pushed to your repository and the branch you want to use.

Configuring new application details on Kinsta

Add your Laravel APP_KEY in the Environment variables section. The key is in your local project directory’s .env file.

Configuring application environment variables on Kinsta

Click Continue and select the build environment according to your preferences.

Leave the start command in the Resources section blank for now, and then click Continue to proceed.

Finally, complete the payment information. The deployment starts immediately.

You need two build packs to run your application properly: PHP to run php commands, and Node.js, to run npm commands. To do so:

Go to your application, and from the left-side navigation, click Settings.

Click Add buildpack and add the build packs for Node.js and PHP. However, ensure the PHP build pack is added last in the sequence, as this is a PHP-based application.

Click the Deploy Now button that appears after adding the new build packs, as illustrated in the image below.

Deploy app after adding build pack on Kinsta

Finally, go to your application’s Processes tab, edit the default Web process, and replace its Start command with the following:

npm run build && heroku-php-apache2

Updating the process start command on Kinsta

After updating the start command, your app will automatically redeploy with the new command. Once the deployment is successful, you can visit the domain to see the beautiful card component you created and start testing and developing your application.

Summary

Tailwind helps elevate your Laravel project from simply basic to perfectly stunning. It’s easy to use, saving you from typing massive piles of code just to get the look you want.

Now that you know the basics, explore Tailwind’s capabilities to enhance your application’s look with fancy fonts and enchanting effects. Then, deploy it using MyKinsta to let the world enjoy your application, too.

The post How To Make Beautiful Pages Using Tailwind CSS and Laravel appeared first on Kinsta®.

Gutenberg vs Elementor: Key Differences Between WordPress Page Builders

Jeremy Holcombe — Fri, 28 Jul 2023 15:10:29 +0000

Gutenberg vs Elementor: is there a right choice? Perhaps. But it depends on which features you want from your WordPress page builder.

We’ll explain the basics of Gutenberg and Elementor, then make a direct comparison between the two.

Keep reading for an in-depth look at the comparison between Gutenberg vs Elementor, based on years of experience using both and rigorous testing.

What Is Gutenberg?

Gutenberg is the default WordPress page builder. It was introduced in 2018 and replaced what’s now called the “Classic” WordPress editor, which was the original rich text/HTML content editor without any drag-and-drop functionality.

Gutenberg was actually a response to a wave of third-party page builder plugins, including Elementor, Divi, and Visual Composer, which all came out to replace the Classic Editor.

From a feature standpoint, Gutenberg offers an easily accessible “block” library for dragging content elements onto the pages and posts.

The Blocks tab in Gutenberg.

Gutenberg comes with close to 100 content blocks, some of which allow for integrations and embeds from third-party services like Twitter, Reddit, and Amazon Kindle. It’s also possible to create dynamic blocks for updating block content automatically. Some Gutenberg block examples include:

Paragraph
Heading
Table
Image
Gallery
Video
Buttons
Calendar
Custom HTML
Latest Posts

Most WordPress themes work well with Gutenberg (they’re essentially required to now).

The Gutenberg interface presents page or post content at its center, with rendered content (like showing forms or buttons) when possible. This is a significant upgrade from the Classic Editor since Gutenberg supports rapid markdown editing alongside a visual user experience. And if needed, there’s direct access to custom coding sections for CSS and HTML.

Each block provides its own long list of settings, and Gutenberg has quick panels for powerful control over document and block settings, like alt tags, background colors, and comment moderation.

What Is Elementor?

Elementor is a page builder, much like Gutenberg. However, Elementor predates Gutenberg as one of the third-party page builder apps that eventually lead to the creation of a default WordPress page builder.

Introduced in 2016, Elementor has been a favorite of WordPress designers due to its fully visual web design interface, sleek starter templates (ready for importing), and drag-and-drop content modules.

Elementor

One of the most immediately noticeable differences between Elementor and Gutenberg is that Elementor is not built into WordPress. It’s made by a different company, so you must install its free plugin (premium versions are available, too).

You’ll also notice that Elementor has unique names for its features. What they call “blocks” in Gutenberg are referred to as “widgets” in Elementor. Speaking of which, Elementor boasts over 100 of those content widgets.

Examples of Elementor content widgets:

Post
Text Editor
Heading
Image
Text
Testimonial
Toggle
Progress Bar

Many of the widgets create integrations between a WordPress website and third-party apps, such as Stripe, Facebook, and Sound Cloud.

Overall, Elementor is one of the top WordPress page builders with a vibrant community of developers and users. The visual, drag-and-drop interface is hard to beat, you receive hundreds of designer templates, and all editing is done live.

Along with specialty WooCommerce widgets and marketing tools for landing pages and forms, Elementor remains a behemoth in the website building space, and that’s noticeable when comparing Gutenberg vs Elementor.

Gutenberg and Elementor Compared

We’ll compare Gutenberg vs Elementor in areas like features, user interface, pricing, and more. After our review, you’ll have a stronger understanding of which page builder is right for your needs.

Key Features

In this section, we picked out what we consider to be the “key” features of a page builder, then we’ll compare Gutenberg vs Elementor in each category.

Drag-and-Drop Functionality and Coding: Gutenberg vs Elementor

The issue with page builders is that they often fill the interface with visual creation tools and push the more advanced functionality, like code editing, out of view.

We prefer seeing a mix of both, where beginners have a sleek drag-and-drop interface that’s easily accessible, and advanced users can use CSS without having to dig around for the right field.

Gutenberg’s drag-and-drop functionality is straightforward and without lag. It only takes a moment to search for content blocks and drag—or click and insert—them into the content. Then, the block settings appear for customization.

There are dozens of content blocks available.

One downside is that dragging currently placed blocks forces you to first select a block, then click and hold on a small Drag icon. This requires precision when clicking, which isn’t necessary for other page builders.

Use the Drag icon to move blocks.

When it comes to coding, Gutenberg makes its Code Editor easy to find.

The Code Editor is easily accessible.

Users have found issues with blocks messing up their code and difficulties with the pre-made blocks, requiring developers to produce dozens of custom blocks.

Despite complaints, the page builder has improved for coders, and the tools are definitely there, but with perhaps a steeper learning curve than what was available in the Classic Editor.

You can even add HTML Anchors and additional CSS classes right from the Block tab in Gutenberg, which previously required a tedious trudge through the HTML tab in the Classic Editor.

Adjust HTML Anchors and CSS Classes.

Elementor provides drag-and-drop functionality, too. It works with most WordPress themes and presents a library of blocks to insert quickly onto any page.

A list of basic blocks.

Since Elementor uses a semi-automatically generated grid system, it’s possible to drop widgets on most areas of a page.

Dragging a button block into the editor.

Moving previously placed content blocks is easier with Elementor than in Gutenberg. You simply click and hold anywhere on the block to move it.

You can move any block with a click and drag.

Inserting or selecting a content widget shows that widget’s content, style, and advanced settings. As for coding, it’s streamlined with many of the block settings. Like how you can add HTML anchors, attributes, and custom CSS right in the widget or page settings.

Insert custom CSS with ease.

Elementor also provides HTML Code widgets for inserting any custom coding you’d like through a webpage.

You can use the HTML code box for your own customizations.

Overall, the drag-and-drop functionality of Elementor is stronger than Gutenberg’s. Yet, the custom coding options appear equally accessible in both page builders.

Templates (For Websites, Blocks, Pages, Popups, and More): Gutenberg vs Elementor

Page builder templates allow developers to construct websites with blazing speed. Templates allow you to start with professional websites or page designs instead of building from scratch.

Many page builders offer pre-made templates for:

Full websites
Pages
Blog posts
Page sections
Content blocks
Headers
Footers
Landing pages
And more

Gutenberg has a severe lack of pre-made templates. The Patterns tab provides helpful section templates, but that’s about it.

The Patterns tab.

However, it is possible to install third-party plugins with starter templates for pages and full websites. Plugins like Gutentor, Twentig, and Otter Blocks all fit the bill.

Elementor, on the other hand, is fueled by hundreds of starter templates in its Theme Builder.

The templates from Elementor include:

Headers
Footers
Single pages
Single posts
Archives
Search results pages
Product pages
Product archives
404 pages

The various theme builder elements from Elementor.

Just about all the templates from Elementor require a premium subscription, but that’s affordable and better than what you get from Gutenberg.

Styling: Gutenberg vs Elementor

The styling features in Gutenberg allow for rapid customizations on the right-side Block panel—after selecting whatever block you want to edit.

Styling an image in Gutenberg.

The style settings are fairly basic compared to what’s in Elementor, but the essentials are almost always there, like options to change borders and dimensions for images, or color, typography, and margin settings for paragraph blocks.

Along with custom CSS for all blocks, you’ll find a hovering toolbar when a block is clicked. This section offers the styling of text, editing with HTML, copying that styling, and duplicating.

The hovering toolbar.

Style settings in Elementor are contained in three tabs when a widget is selected. Adjust content settings for image and text sizing, then jump into the advanced areas, with everything from hover animations to CSS filters and masks to transform effects.

Adjust styling for any selected block.

There’s no doubt that Elementor has a stronger collection of styling tools than Gutenberg. However, those who want the utmost simplicity will feel right at home with the styling features available in Gutenberg.

Content Blocks/Widgets: Gutenberg vs Elementor

Gutenberg comes with a little over 90 content blocks. Elementor provides over 100.

Here are the Gutenberg block categories:

Text
Media
Design
Widgets
Theme Embeds

You get all the essentials (paragraph, image, and button blocks), along with unique elements for things like Speaker Deck, Kickstarter, Query Loops, Verse, Time To Read, and more.

Elementor categorizes its content widgets as well:

Basic
Pro
General
Site
WooCommerce
WordPress

Those aren’t the most helpful categories, but at least they’re organized in some fashion.

Standard content widgets—like dividers, sections, and headings—are provided. There are also unique widgets for Google Maps, Code Highlights, WooCommerce Product Data, and more.

More advanced elements include Product Images, Product Meta, and Upsells.

Our conclusion is that Gutenberg organizes and explains its content blocks much better, but Elementor provides a higher quantity of blocks (widgets) with stronger settings.

WooCommerce Support: Gutenberg vs Elementor

WooCommerce is a third-party plugin for turning any WordPress site into an online store. When paired with a page builder, you often receive WooCommerce blocks for greater customization of the shopping cart, product pages, and more.

Gutenberg is no exception. Once you install WooCommerce, a myriad of Gutenberg blocks appear for strengthening the design of your WooCommerce store. There are Product Search blocks, options to show Active Filters, and ways to display the Best Selling Products. We counted 26 Gutenberg/WooCommerce blocks, and there are several third-party plugins to expand upon this list.

The WooCommerce blocks.

Elementor plays well with WooCommerce, too, but for a price. You must have an Elementor Pro subscription to unlock any of the WooCommerce content widgets or page templates. Having said that, Elementor Pro is affordable, and the blocks provide more powerful styling tools than anything in Gutenberg.

At the time of this article, 20 WooCommerce blocks were available through Elementor. The list includes Product Images, Add To Cart buttons, Product Ratings, and Product Galleries.

Additional WooCommerce blocks like Menu Cart and Product Title.

There are even unique widgets like Upsells and Product Meta Data.

Integrations: Gutenberg vs Elementor

It’s important to not confuse integrations with compatibility. We’ll cover theme and plugin compatibility further down in this article, but integrations are more like links to other applications, platforms, and software, where data is sent to or from the page builder.

For example, an integration with Facebook might show a button for people to follow your page or a list of your most recent Facebook posts.

Gutenberg has a short list of direct integrations, mainly using blocks to pull content from exterior sources.

Here’s a taste of the 32 current Gutenberg integrations:

Openverse
Twitter
YouTube
WordPress
SoundCloud
Spotify
Crowdsignal
Dailymotion
Imgur
Issue
Kickstarter
Amazon Kindle
Pinterest
Reddit
Slideshare

Elementor has a strong list of integrations, from media platforms to social sites.

Here are some of Elementor’s 40+ integrations:

PayPal
Facebook (for comments, embeds, pages, and buttons)
YouTube
Vimeo
Google Maps
SoundCloud
MailChimp
ActiveCampaign
ConvertKit
HubSpot
Zapier
Discord
Custom icon libraries
Slack
ReCaptcha
Drip

Both have respectable integrations, but the Elementor integrations appear stronger and more plentiful. You can tap into prominent email marketing providers, sell through payment processors, and connect with your customer relationship management software in Elementor. Whereas Gutenberg focuses more on linking to media libraries and social sites.

User Interface: Gutenberg vs Elementor

Getting started with Gutenberg is as intuitive as WordPress itself. That’s because Gutenberg is built into the WordPress dashboard automatically. There’s no need to install a plugin or add-on. Simply open a page or post editor, and Gutenberg goes to work.

Add blocks via the search bar or in the editor.

You’re able to search for and insert blocks by clicking on one of the several “+” (Add Block) buttons scattered around the editor. It provides a search bar, along with various tabs for Blocks, Patterns, and Media. You’ll even notice that Gutenberg integrates with popular Creative Commons image providers for finding suitable graphics for free.

Speedy content creation makes Gutenberg one of the best page builders for bloggers and anyone who publishes online. You can write directly into the editor and utilize markup and keyboard shortcuts to quickly insert elements like headlines, links, and images.

Not to mention, Gutenberg integrates with a wide range of other third-party text editors, or you can copy content from other programs directly into Gutenberg (without having to upload images a second time or adjust with formatting).

The Page tab offers publishing and page-focused settings, like tools for featured images, excerpts, and comments.

The Featured image tab.

It’s easy to adjust block-oriented settings as well. Just click on the Block tab. This opens up the unique customization features for the block you have selected. For instance, an Image block shows everything from Alt Text fields to settings for Image Dimensions. This is also where you would add CSS Tags, HTML Anchors, or Title Attributes.

Use the Block tab to access all the block’s settings.

When it comes to ease of use, Elementor is no stranger to making things intuitive. However, there is a learning curve, mainly due to the robust collection of features provided.

In the editor, you receive an exact replica of a page’s frontend as the editor. Every Elementor content widget is available to drag or edit from the library.

Categorized Elementor elements.

Although the categories lack useful names, you can find the widgets under Basic, Pro, General, Site, WooCommerce, and WordPress. There’s also a Favorites panel to save custom widgets for later.

The true ease of use in Elementor comes from its grid-based editor, which allows you to drag and drop an element just about anywhere on the page. Not only that, but you can drag entire sections, delete sections, or add sections by clicking within the editor.

Dragging a block to another location.

We also enjoy quick access to the blocks and templates library. Save custom templates for later use, or take advantage of professionally designed blocks and page templates. Many of them are for specific situations, like if you needed a 404 page or a custom WooCommerce cart.

Just a small portion of the blocks available through Elementor.

The main downside to the Elementor interface is its third-party nature. You must install a plugin to make it active on WordPress. Even then, you always have to click the “Edit With Elementor” button since Gutenberg is technically still installed in the background.

Overall, the Gutenberg interface is easier to grasp, but there’s nothing like working with Elementor. It’s smooth, fun to use, and capable of far more than Gutenberg, once you get the hang of it.

Performance and Impact on Page Speed: Gutenberg vs Elementor

Page builders provide plenty of features. That could lead to a bulky set of tools that conflicts with plugins and themes and also inhibits page speed. When looking at user reviews, Elementor and Gutenberg appear to perform fine when using the proper optimization tools and a speedy host.

In our test, we installed Gutenberg and Elementor on separate instances of what we know to be a high-performance, CDN-empowered server (from Kinsta). We also used the same theme with demo content to make the testing as equal as possible. We stuck to the same server location (Iowa) for both tests and installed two common plugins (WooCommerce and Yoast SEO) to see how the page builders responded to a real-world environment.

Here are the results using Pingdom and Google PageSpeed Insights:

Gutenberg Page Speed Tests

Pingdom Performance Score: 92 (San Francisco test server)
Page Size: 905.2 KB
Load Time: 1.32 s
Requests: 19

We ran the same test with a test server in London:

Performance Score: 92
Page Size: 905.8 KB
Load Time: 1.50 s
Requests: 19

And here are the results from Google PageSpeed Insights:

Desktop Performance: 99
Desktop Accessibility: 100
Desktop Best Practices: 92
Desktop SEO: 67
Mobile Performance: 93
Mobile Accessibility: 100
Mobile Best Practices: 92
Mobile SEO: 71

Elementor Page Speed Tests

Pingdom Performance Score: 88 (San Francisco test server)
Page Size: 2.5 MB
Load Time: 1.93s
Requests: 48

And the results from the London test server:

Performance Score: 87
Page Size: 2.5 MB
Load Time: 1.97s
Requests: 48

Results from Google PageSpeed Insights:

Desktop Performance: 94
Desktop Accessibility: 100
Desktop Best Practices: 92
Desktop SEO: 67
Mobile Performance: 81
Mobile Accessibility: 100
Mobile Best Practices: 92
Mobile SEO: 71

Gutenberg almost always delivered a higher performance score, lower page size, and faster load time, along with fewer requests. This, however, could be because Elementor has more advanced block designs, and Gutenberg is technically always installed alongside Elementor, so you’re stuck with two page builders running at the same time, potentially slowing the site down.

Regardless, both offer high speeds. The most important part of maintaining acceptable page speeds is opting for a managed, CDN-powered host like Kinsta.

Pricing: Gutenberg vs Elementor

You can get both Gutenberg and Elementor for free. The main difference is that Gutenberg is completely free, forever. Elementor offers a robust free version of its page builder and several upgrades and add-ons for those interested in more advanced features.

Gutenberg Pricing

Free, as it is the WordPress editor and built into WordPress by default.

Elementor Pricing

The Elementor brand offers additional products and services but for the sake of this comparison, we limit pricing to its page builder plugin.

Free Plan: $0 for over 40 free widgets, drag-and-drop functionality, and a developer API
Essential Plan: $59 per year to support 1 website with 100+ widgets, 300+ templates, the drag-and-drop theme builder, WooCommerce store builder, landing page builder, marketing tools, popup builder, and premium support
Expert Plan: $199 per year to support 25 websites and receive all features mentioned in the Essential Plan
Agency Plan: $399 per year for all features mentioned in the previous plans, but with support for 1,000 websites

It may at first seem like a “free forever” plugin (like Gutenberg) is the best deal. But the free version of Elementor is filled with enough tools for many types of projects, and they keep the premium plans reasonably priced.

We would argue that Elementor is a better value than Gutenberg simply because it’s a more streamlined, powerful page builder than Gutenberg, and you can still get many of the features for free. But if you must keep the budget at $0 forever, Gutenberg does the trick.

Compatibility With Themes and Plugins: Gutenberg vs Elementor

It’s difficult to pinpoint compatibility (or lack thereof) for page builders with the thousands of WordPress themes and plugins on the market. However, we can look into user reviews to figure out if there are some glaring compatibility issues with popular themes or plugins.

Gutenberg appears to work with most themes and plugins. After all, third-party developers must cater to the page builder since Gutenberg is built into WordPress by default.

From our research, the most common compatible issues with Gutenberg arise when combined with other page builders on the same website. We’ve also found that plugin developers are playing a game of catch-up to produce Gutenberg blocks related to their plugins. So, you may find that some older, less frequently updated plugins lack Gutenberg blocks.

As of this article, there are about 12 open compatibility questions in the WordPress.org forums, some of which appear to be user errors. But it’s not unfathomable to assume you might encounter some issues.

Elementor is known for having solid compatibility across the WordPress community. However, it’s a third-party page builder, so it’s wise to keep an eye on compatibility tags (notes that explain when a plugin isn’t compatible). And when searching for a theme, always check to see if it’s compatible with Elementor (if that’s what you’re using as your page builder).

For both Gutenberg and Elementor, you must keep an eye out for “multipurpose” WordPress themes with starter templates. Those starter templates are designed for specific page builders, so one for Gutenberg won’t work with Elementor and vice versa. And some themes lack starter templates for these page builders altogether.

Backend vs Frontend Editing in Gutenberg and Elementor

There’s no way to edit content on the frontend of a website with Gutenberg. But that’s kind of the point. Gutenberg strives to combine aspects of frontend editing with the backend experience, allowing you to stick to one interface.

So, for example, all editing occurs on the backend of WordPress, but many of the blocks show up in full display for the most realistic view of what to expect when published.

The Gutenberg backend with its blocks and backgrounds on full display.

Elementor isn’t much different. It used to offer both backend and frontend editing, but it eventually combined the editing experience into one module. So, it’s not possible to go to the frontend of your website and drag elements around.

However, Elementor does bring your pages and posts into its own backend editor, which features a beautiful preview of the frontend page. This way, you see exactly what happens when a change is made.

The Elementor editor.

Finally, both of these page builders have automatic saving, along with manual saving buttons.

Customer Support: Gutenberg vs Elementor

You often only get customer support when you pay for a page builder. During our research, that assumption applied to both Gutenberg and Elementor.

The standalone Gutenberg page builder has no direct customer support line to contact. You can, however, discuss issues in the Gutenberg user forum. WordPress.com members receive dedicated customer support, so you might ask them to assist with Gutenberg questions. WordPress.org users, unfortunately, are left to forums and blog posts to complete their own research.

The free Elementor plugin has a knowledgebase and user forum.

Search for help documentation with Elementor Academy.

To receive email support from a real person, you must pay for Elementor Pro. Having said that, there is a live chat module for sales questions.

Gutenberg vs Elementor: Which One Should You Choose?

After years of experience working with WordPress users and a detailed comparison of Gutenberg vs Elementor, we came to some final conclusions.

Here are the takeaways:

Gutenberg’s features are simpler than those from Elementor. They’re great for the basics of web design, but power users will want the advanced style settings and content blocks from Elementor.
Gutenberg’s user interface is built into WordPress, whereas Elementor’s will always be a third-party plugin. However, the user experience is seamless in Elementor, and it’s much harder to simply drag and drop an element in Gutenberg.
Performance-wise, both Gutenberg and Elementor perform well. Our tests showed that. Regardless, you may encounter page speed slowdowns. The primary way around that is with a quality host like Kinsta.
Gutenberg is always free, but you’re stuck with what’s there. Elementor has a powerful free version with the option to upgrade for more features and real customer support.
Gutenberg and Elementor are compatible with a wide range of WordPress themes and plugins.
The backend editing in Gutenberg provides a visually pleasing interface with quick styling options. Frontend editing doesn’t exist. You can, however, see a live frontend view in the backend editor. Elementor only offers backend editing as well, but with a real preview that shows everything from the frontend.
Gutenberg has section templates but nothing else. Elementor is packed with section, website, page, header, and landing page templates, all of which require a premium plan.
Customer support for Gutenberg is contained in user forums and whatever blog posts you can find about it. Paying WordPress.com users can get assistance with Gutenberg. Paying Elementor users receive human support, while free users gain access to many online resources, including a knowledgebase.

Summary

Each page builder has its place. Elementor is for more skilled users or those who need a library of page templates. Gutenberg serves as the ready-to-go page builder on WordPress, with simplified and easy-to-use styling tools and settings, making it perfect for rapid content creation.

When creating a WordPress website, you’ll need a powerful host in your corner. At Kinsta, we offer a range of performance-optimized WordPress hosting plans for all your Elementor or Gutenberg needs.

The post Gutenberg vs Elementor: Key Differences Between WordPress Page Builders appeared first on Kinsta®.

How To Create a Blog in Laravel

Marcia Ramos — Wed, 26 Jul 2023 15:23:29 +0000

Laravel is a PHP web application framework with an expressive, elegant syntax. It has a vast library of packages and handles much of the drudge work in programming, leaving you to focus on your creativity.

One creative use for Laravel is the construction of a personal blog. This tutorial describes how to use Laravel to build and publish a blog on Kinsta.

For a preview of the project, check out the complete project code.

Prerequisites

To follow this tutorial, ensure you have the following:

A web server. This tutorial uses XAMPP.
An account on GitHub, GitLab, or Bitbucket for publishing your application’s code.
Laravel installed.
An active MyKinsta account for application hosting. Sign up for a free trial if you don’t already have one.

Ensure that the Apache and MySQL module services are running in the XAMPP Control Panel. If not, click each service’s Start button in the Actions column. Your XAMPP Control Panel should look like this:

XAMPP Control Panel

By default, MySQL/MariaDB runs on port 3306. Take note of the port if you change it.

If you use a web server other than XAMPP, ensure you are running Apache or other server software and have installed MariaDB server on your local machine.

Quickstart With phpMyAdmin

With MySQL and Apache running, head to your browser.
Open phpMyAdmin and paste in http://localhost/phpmyadmin/. It should display the following:

phpMyAdmin opened in the browser.

phpMyAdmin is a database management tool for MySQL and MariaDB.

Create a New Laravel Project

You can now start creating the blog using Laravel. For this tutorial, we used a computer running on Windows.

Go to your machine’s terminal or command line interface (CLI).
Create a Laravel project called blog using the laravel new blog command.
Open your project’s blog directory with the command cd blog.
Then, open the directory in your code editor.
To check that you built the project successfully, run php artisan serve in your terminal or CMD.
Click the local address output to serve it to the browser. The browser should display the default Laravel Welcome page, shown below:

Laravel Welcome page

Configure the Database

Create and configure the database by returning to phpMyAdmin in your browser and creating a database called blog.

To create the database, on the Databases tab, type “blog” in the Create database field.
Then, click Create.

Database creation in phpMyAdmin panel

Next, update the database connection to your .env file at the root of your blog project. Change the DB_DATABASE and DB_PASSWORD values to the ones you created.

The connection details should look like this:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog
DB_USERNAME=your-db-username
DB_PASSWORD=your-db-password

The other database connection details remain the same as in the .env file. If you change any connection value, such as changing DB_PORT from 3306 to 3307 during configuration, ensure to update it in the .env file.

Make the Posts Table

Next, create a database model and migrate the changes.

In your terminal, run php artisan make:model Post -mc to create a model called Post, a table called posts, a migration file, and a controller.

Creating a model, a migration file, and a controller through the command line.

Check the database/migrations directory and open the migration file you just created. It has the following format: YYYY_MM_DD_ID_create_posts_table.php.
In the up() method of the migration file, create a schema with title, description, and image attributes.

public function up() {
  Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title')->nullable();
    $table->text('description')->nullable();
    $table->string('image')->nullable();
    $table->timestamps();
  });
}

Now, go to your terminal and migrate the changes using php artisan migrate, as shown below:

Laravel database migration

Go to phpMyAdmin in your browser, where you will see the posts table:

The migrated posts table is displayed in phpMyAdmin

How To Create Controllers

Adding views and controllers implements your business logic for the database set. The views are the user interfaces that display data objects from the model. Controllers manage the flow of data execution between the model and views.

Before creating Blade files, run npm install, followed by npm run dev in your terminal. The first command installs the required npm packages. The second command starts a Vite development server.
Head to the app/Http/Controllers directory, open the PostController.php file, and create an index controller method. The controller method renders a simple text to the browser. To do so, add the following code to the PostController class:

public function index() {
  $post = "Laravel Tutorial Series One!";
  return view('posts.index', ['post'=>$post]);
}

This method passes $post as a context variable to the views section of the index Blade template. $post contains text to display, which, here, says, “Laravel Tutorial Series One!” You will replace this with the loop through the posts later.

Create two new directories in the resources/views directory: layouts and posts.
Inside the layouts directory, create an app.blade.php file. Other Blade files will inherit from it.
Copy this code into app.blade.php:





  
  
  Blog
  

  @yield('content')




  
    Mini-Blog © 2023

By using this HTML code, you import Bootstrap version 5.2.3 and Vite to bundle the JavaScript and CSS assets. The generated page has a header with a navbar and a footer with the scripts called below it. In the body, dynamic content renders from other Blade files with the help of @yield('content').

The posts directory holds the Blade files for implementing create and read operations.

Inside the posts directory, create a Blade file called index.blade.php and add the following code:

@extends('layouts.app')
@section('content')

  
    Blog list
  
  
  The Blog 1 - {{ $post }}

@endsection

This code extends from the app.blade.php file on the layouts page. When rendered in the browser, it shows the content of each blog post and the navigation bar and footer inherited from the app.blade.php file in the layouts folder. Between the section tags, you pass the content from the controller to render in the browser when you execute the application.

Set the route in the routes directory. Setting the route allows for automatic loading by the RouteServiceProvider in the App/Providers directory. The RouteServiceProvider is the class responsible for loading the application’s route files.
Inside the routes/web.php file, import PostController using use AppHttpControllersPostController.
Then, set the route by adding Route::resource('posts', PostController::class); to the routes/web.php file.
With the Vite development server still running, use php artisan serve to execute the application in your terminal.
With your browser, open http://127.0.0.1:8000/posts to see your new blog post list.

The page should look like the following:

The blog application is displayed in the browser

In the next section, we define the controller methods for displaying all posts, creating a post, and storing a post. Then, add their routes and create the Blade files in the corresponding sections.

Create the Blog Post Page

Make blog posts by inputting a title, adding a description, and uploading an image. Then, display your posts in sequential order.

In the app/Models directory, open the Post.php file.
In the Post class below the use HasFactory; code block, add protected $fillable = ['title', 'description', 'image'];.

This code protects your model attributes from mass assignments.

In your app/Http/Controllers/PostController.php file, import the Post model using use AppModelsPost;.
Replace the index and create controller methods created earlier in the PostController class with the code below:

// Show all posts
public function index() {
  $posts = Post::orderBy('created_at', 'desc')->get();
  return view('posts.index', ['posts' => $posts]);
}
    
// Create post
public function create() {
  return view('posts.create');
}

In the index method you just created, the PHP application fetches all posts, puts them in chronological order, and then stores them in a posts variable. In the return view, the posts pass into the index.blade.php file as a context variable in the views/posts directory. The create method returns a create.blade.php file and places it in the views/posts directory if a user tries to make a new post.

Create a store controller method using the code below (to store blog posts in the database). Add this code to the PostController class below the index and create controller methods.

// Store post
public function store(Request $request) {
  // validations
  $request->validate([
    'title' => 'required',
    'description' => 'required',
    'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
  ]);

  $post = new Post;

  $file_name = time() . '.' . request()->image->getClientOriginalExtension();
  request()->image->move(public_path('images'), $file_name);

  $post->title = $request->title;
  $post->description = $request->description;
  $post->image = $file_name;

  $post->save();
  return redirect()->route('posts.index')->with('success', 'Post created successfully.');
}

The store method handles client requests regarding the data in its body, so it takes request as an argument. Next, you validate the fields used when creating a post and make a post instance from the Post model. The inputted field data is then assigned to the created instance and saved. The page redirects to the index view with a flash text that says, “Post created successfully.”

Add Routes to Your Posts

To register the routes in your web.php file:

In the routes directory at your project’s root, open the web.php file.
Register the routes of the controller methods by replacing the existing code with this:

names([
  'index' => 'posts.index',
  'create' => 'posts.create',
  'store' => 'posts.store',
  'show' => 'posts.show',
]);

This controller uses these routes to create, store, and display your data objects.

Make Blade Files

To create the views, return to the PostController class:

In the resources/views/posts directory, make a Blade file called create.blade.php and add the code below:

@extends('layouts.app')
@section('content')

  Add Post
  
    
      @csrf
      
      @if ($errors->any())
        
          
            @foreach ($errors->all() as $error)
              {{ $error }}
            @endforeach
          
        
      @endif
      
        Title
        
        Description
        
        Add Image
        
        
      
      
    
  
    

@endsection

In this code, create.blade.php inherits the contents of app.blade.php in the layouts directory using @extends('layouts.app'). These contents include a header, navigation bar, and footer. After adding the Add Post text within the h1 tag, you created a form with the post method that contains the {{route('posts.store')}} action.

The code enctype="multipart/form-data" allows for image uploads, and csrf protects your form from cross-site attacks. Then, the error messages display invalid field entries and usefield attributes to create labels and inputs for the form.

Now, replace the code in the index.blade.php file with the code below to display all the blog posts:

@extends('layouts.app')
@section('content')

  
    Add Post
    Mini post list
  
    
  
  
  @if ($message = Session::get('success'))
  
    {{ $message }}
  
  @endif
         @if (count($posts) > 0)
    @foreach ($posts as $post)
      
        
          
            
              image)}}" alt="">
            
            
              {{$post->title}}
            
          
          {{$post->description}}
          
        
      
    @endforeach
  @else
    No Posts found
  @endif

@endsection

This code adds an Add Post button. When clicked, it creates a post and passes any data into the page’s body. The if condition checks if there is data in the database. If there is data, it passes. If not, it displays “No Posts found.”

Structure Your Pages

You can now run your application using php artisan serve to create and display blog posts. Open http://127.0.0.1:8000, and the page should look like this:

The blog application appears in the browser

If you add a post, it appears like this:

The blog application displays a post in the browser

Deploy Your Laravel Blog to Kinsta

To deploy and test your Laravel application using Kinsta’s Application Hosting service:

Create a .htaccess file.
Push the code to a repository.
Create a database.
Set up a project on MyKinsta.
Build and deploy your blog.

Create an .htaccess File

In the project’s root folder, create a file called .htaccess, and add the following code:


  RewriteEngine On
  RewriteRule ^(.*)$ public/$1 [L]

This code redirects your application requests to public/index.php in the deployment.

Push Your Code to a Repository

Create a repository for your project and publish the code. You can use GitHub, GitLab, or Bitbucket to host your code and deploy it to MyKinsta.

Set Up the Database in Your MyKinsta Dashboard

To create a database on MyKinsta:

Click the Add Service button and select Database.
Enter the details of your database as shown below. Note that for your deployment to be successful, you must leave the Database username as the default value.

Creating a database in MyKinsta

The details include the Database name, Display name, Database type, Version, Database username, Data center location, and Size. This demonstration uses MariaDB for the database, and the Size is Db3 (1CPU / 4GB RAM / 10GB Disk Space 65 USD / month). You can choose the database type and size that suits your specific needs.

Click Continue.
Confirm your monthly cost and payment method, then click Create database.

Set Up the Project on MyKinsta

To deploy your application to MyKinsta:

Click the Dashboard panel.
Click Add Service and select Application, as shown below:

MyKinsta dashboard when adding application service

MyKinsta redirects you to the Add Application page.

In the Select branch card section, select your GitHub repository, then select the Add deployment on commit checkbox.
In the Basic details, input the application name and select the data center location for your application.
Since Laravel needs an app key during deployment, in the Environment variables card, add an APP_KEY as Key 1. You can use the APP_KEY defined in your local .env file or use an online Laravel Key generator to get one.
Click Continue.
Select the build resources (CPU and RAM) for your application. This demonstration uses the standard build machine (1CPU / 4 GB RAM) – 0.02USD / minute.
Leave the Set up container image automatically radio button selected.
Click Continue.
In the Set up your processes page, you can change your application’s pod size and instance by selecting these boxes. This demonstration uses the default values.
Click Continue.
Finally, click the Confirm payment method button to start your application’s deployment. Clicking this also directs you to the Deployment details page to view the progress of your deployment.

Build and Deploy Your Application

With the database and application hosted, connect the database to your application and build to deploy.

To connect the database, use the external connections of your hosted database. On the Info tab of your hosted database, you see External connections, as shown below:

External connections for your hosted database

On the deployed app’s Settings page, navigate to the Environment variable card.
Click Add environment variable to add the external connections of your hosted database with the corresponding value. Use the same variables you have in your .env file.

The environment variables for your hosted database

This screenshot is handy if you consider marking the env variables you edited manually to differentiate them from the others.

The APP_URL is the URL of your hosted application, and DB_CONNECTION is mysql.

Head to your application’s Settings page.
In the Buildpack card, add PHP and Node.js as build packs. Since this is a PHP application, you must add the PHP build pack last.
Click Deploy now to rebuild your application.

Next, add a process that will migrate the database.

Head to the Processes tab on your hosted application page.
Select Create process on the Runtime processes card.
Enter Migration as the name, Background worker as the type, and php artisan migrate --force as a start command. You can leave the pod size and instances with the default values.
Select Continue to create the process. This action triggers a new build and redeploys the application.
On the Domains tab of your application, click your application link. You can see that it’s now up and running.
Note that the blog application deployed to MyKinsta displays no posts. Create a new post by inputting its title, adding a description, and choosing an image.

Summary

Laravel makes it easy to develop a simple blog quickly. Its rapid page loading, robust controller architecture, and competent security make enhancing an application’s performance easy. Meanwhile, MyKinsta lets you release and ship your web applications quickly and effectively. MyKinsta’s flexible pricing model is based on usage, eliminating hidden costs.

When Kinsta hosts your Laravel application, it runs on the Google Cloud Platform on their Premium Tier, making it as fast as possible. Kinsta also includes enterprise-level DDoS protection and mitigation with Cloudflare and advanced firewalls to keep malicious actors at bay and much more.

Start your Application Hosting free trial right now to streamline your web application development and hosting!

The post How To Create a Blog in Laravel appeared first on Kinsta®.