In the previous installments of the CMS series, I’ve covered building websites with Craft CMS and Typo3 CMS. The main ideas discussed in those blogs were to give you an understanding of the CMS hosting structure and the core concepts behind CMS based website development
This time I decided to move along with a new CMS, Concrete5.
Concrete5 is an open-source content management system that simplifies website creation. The best part – unlike several CMS out there, Concrete5’s internal edit toolbar makes both website creation and management easy. To update any element on any page, simple point and click.
The CMS is built for DIY and non-techie markets. So even if you are not a developer, you can easily start building websites quickly in seconds, thanks to Concrete5 themes and a host of Concrete5 add-ons. For developers, Concrete5 is a robust and scalable platform that you can extend with custom code, themes, and tools. Also, Concrete5 templates do a good job of speeding up the dev process.
Now that you know about the said CMS, Let’s see how you can deploy it to Cloudways managed PHP servers from GitHub. Check out this guide to install Concrete5 directly.
Deploying Concrete5 From GitHub
Cloudways offers integrated workflows that simplify the process of deploying Concrete5 from GitHub repo.
Step#1 Create a Cloudways Account
The first step is to sign up for a Cloudways account and launch a managed cloud server and a PHP application. When the application is ready, go to the Application Management screen.
Step#2 Generate SSH Key
Now, Find the tab “Deploy via Github” on the left panel. Click the Generate SSH Key button.
Once the key has been created, click the View SSH Key button to view it.
Step#3 Upload the SSH Key to GitHub
At this point, I assume that you have already created a code repo for the Concrete5 project.
Open the settings of the repo and click the Deploy Keys tab. Copy the content of the key created on the Cloudways Platform and click the Add Deploy Key button.
Step#4 Deploy Project on Cloudways
Copy the SSH URL of the GitHub repo:
Now open the Cloudways application and paste the URL in the Remote Address field:
As soon as you click the Authenticate button you will get all the branches in the branch dropdown. Select your desired branch (generally, master) and enter the deployment path. To deploy on the root, leave the field blank. Click the Start Deployment button now and the application will be deployed in a few minutes.
Overview of the Concrete5 Dashboard
Now that the Concrete5 application has been deployed, open it from the Application Detail page.
The Dashboard option is located at the top right corner.
These options can be used to manage the website and set up the sitemap of the website for SEO purposes. You also get a file manager to manage the media, web, and other files. A Members section offers all the options for managing the users and roles. The Express section creates entities and the Reports section offers the results of any form/survey results and any page changes that occur on the website.
There is also the dev favorite Pages & Themes section where you can add Concrete5 themes (more on this later). For creating events, you have a Calendar and Events page.
To edit and extend blocks on your website (for instance, you might need to add more options to the website navigation), you can use the Stack & Block option. The Extend Concrete5 option is used to update/add more addons and themes.
Finally, you have System and Settings options to see the server and application-level changes and configurations.
In the top left corner, you can see the internal editing toolbar that I mentioned earlier. Click a button and you will see every part of the page convert into the block and you can edit any block on the page:
Just click the Edit Block option and you will have an edit form with relevant fields that you can update to change the look and feel of the block.
Top Five Concrete5 Themes
Concrete5 comes with a host of free and paid themes that are available at several popular marketplaces. Let’s check out the top five themes.
Structura
Structura is a responsive multi-purpose Concrete5 theme with lots of features that are ideal for creative, portfolio, and corporate sites. Structura was built with Foundation 4 (the most advanced responsive front-end framework in the world) and has a clean and modern design which means your site will look great in all browsers and devices. This theme is a top-seller at the Themeforest marketplace.
FruitFul
This is a dynamic theme and can be applied to all websites with beautiful results. The best part is that this is a free theme and could be a great starting point for Concrete5 projects. Fruitful provides a modern, clean, and easy to navigate structure, thanks to the solid Bootstrap foundation and block-based design.
Pixel
Pixel is a modern, multipurpose, and responsive Concrete5 theme built on top of Bootstrap v3.3. The theme provides multiple layouts, and plenty of blocks, templates, classes, and options. The theme contains more than 100 blocks and pre-build optimization options like an HTML minifier.
Frame
The frame is a great responsive theme and a great fit for ecommerce applications. This theme has multiple addons and customizable features for extending the website. The frame is built on the Foundation 6 framework and has six different layout templates.
Supermint 3
This is an easy-to-adapt theme and provides maximum flexibility to extend the theme to fit your projects. Supermint is made for business, ecommerce, portfolio, and magazine websites. Supermint is a great theme that gives you advanced visual and technical control over all aspects of the theme.
How to Install Concrete5 Themes
Installing Concrete5 themes is a simple and quick procedure.
The CMS has a marketplace with paid and free themes. There are two approaches to installing the themes. You can install themes from the marketplace or manually upload them to the server. For this guide, I will show how to install a theme from the Concrete5 marketplace.
In the Concrete5 dashboard, click the Pages & Themes tab. You will see the default and installed themes on the list.
Click the green button with the label Get More Themes. You will be redirected to the themes marketplace.
Let’s install a free theme FruitFul that I mentioned earlier. Just click the Free button and the theme will be added to the list.
Now click the Activate button and the theme will be activated on your website. The wizard will ask about activating the theme on certain pages or the entire website.
I’m activating the theme for the whole website:
Open the website in a new tab, you will see that the new theme has been applied.
Top 5 Concrete5 Add-ons
Concrete5 has several add-ons that extend the core functionality of the platform. There are a host of add-ons but in this guide, I will mention the top five add-ons for Concrete5. They are available on the same page as the themes.
Block Designer
This addon allows you to create custom blocks. Just add a name and a unique handle with the HTML code and the block is ready. The addon is pretty flexible with as many as 17 field types. The addon is fully mobile responsive and can be used from any device, anywhere.
Simple Gallery
This addon creates a simple gallery from a set of the provided files. The images have integrated magnified popup to show a larger size. You can set the width and height of thumbnails and the fullscreen image and set the number of columns depending on the device type.
Styled maps
This addon allows you to integrate Google maps anywhere on your website with custom themes and markers that popup on the map. Also, Satellite and Street View control options are available.
Formify
Formify allows you to show form records in an HTML template on your website. Forms can be created at the backend and used to collect data from visitors. You can use the addon to create contact forms, job applications, real estate listings, image galleries, news archives, and event calendars.
Payment with Stripe
This addon allows you to accept online payment using the Stripe checkout option. You can place a payment button with pre-configured product purchases.
Install Concrete5 Add-ons
The installation process of addons is the same as the Concrete5 themes – just go to the Extend Concrete5 > Get More Addon tab and find your desired add-ons. In my case, I’ve installed the Simple Gallery by clicking the Free button.
Now go back to the Extend Concrete5 tab. You will see the addon is listed here after successful installation. The configuration may vary from the addon to the addon.
Final Words
In this article, I introduced Concrete5 CMS in detail and discussed how easy it is to build websites with this CMS. The internal block editor is a remarkable feature that lets you update anything on any page. With the use of the Concrete5 theme and add-ons, you can extend the core functionalities of the platform. With Concrete5 templates, you have ready-made options for rapid deployment.
If you have any questions or queries regarding the CMS, please comment below.
