Our redesigned site was presented today. We developed it by using new Drupal 8, and appreciated its convenience.
Home Page
We wanted to show previews of all sections of the site on the main page. In such way the user can quickly scan through the most important information, and keep reading the section, he is interested in. So we made a kind of extended one-page site. Displaying information in one column seemed boring, so we decided to make full-screen slides. The first slide and About — are just custom block, Portfolio and Blog — Views, Contact — is a form and separate block with the address.
To make the slides scrollable, we found jquery plugin - PagePilling. How do we connect it to Drupal? The first thought was to use Panels. In addition to Panels, Drupal 8 has Layouts module, using which we can quickly add templates for Panels, Display Suite and connect js and CSS files to them. We made our Layout with the markup for PagePiling plugin. The result is on GitHub, so you can use it as well.
PagePiling – Drupal integrations
- Install Panels or DisplaySuite
- Install PagePiling Layout module.
- Load jquery.pagepiling library to libraries folder.
- Now on the panel's page (or DisplaySuite) you can select Layout: PagePilling layout.
Projects
Portfolio is an important section on the site. For the page that displays the portfolio project, we wanted to use a nonstandard styling. And that's where Layout module also came in handy. But we decided to use Display Suite, this time, we could also use Panels, but DS better suits node pages and gives a cleaner code.
First, we draw a prototype in Sketch with fields name. Based on it, made a new layout and simply placed fields in "Manage Display" of content type.
Here we wanted to add an opportunity to change CSS styles for each project. After a short search, I've found Asset Injector module (https://www.drupal.org/sandbox/pookmish/2621756), it is not released yet, but as it appeared, it worked great. Module adds a page in admin panel, where you can write CSS or js, select a template and pages where the written code will be connected.
Articles
From the beginning, we've planned English website, but in the work process we've come up with a few ideas for the articles, and since the original text was in Russian, we decided to keep both versions, and in the future, publish the articles in two languages. Modules for multilingual support are already available in the standard Drupal distribution, we only had to enable and customize them. For the convenient creation of large articles with many images, we use Paragraphs module.