Edificio WordPress Theme Documentation

Edificio is a portfolio, FSE-ready WordPress theme built for architectural design studios. The theme is sleek, elegant, and soft, infused with black and white moments that make Edificio so powerful. Learn how you can get the most out of the theme with the Edificio WordPress theme documentation.

Edificio WordPress theme documentation, step 1: Theme installation

The theme can be installed in two ways – through the WordPress admin dashboard or by manually uploading files through an FTP. Before installing, please unpack the .zip file that you have downloaded, and inside the unpacked .zip file, you will find two more files – a parent and child theme. Install the parent theme first and then the child theme. Activate the child theme when the installation is done.

Installing the theme through the WordPress admin dashboard

1. Log into the WordPress admin panel.
2. Go to Appearance -> Themes.
3. Click on the Add New button, at the top of the screen.
4. In the Add Themes screen, click on Upload Theme.
5. Click on Choose theme, and then browse for the theme file on your computer.
6. Click on Install Now to start the installation.
7. After the installation is done, click on Activate theme.

Installing the theme by manually uploading files

1. Download the latest theme version from WooCommerce.com.
2. Extract the zip folder on your computer.
3. Connect to your server using an FTP client.
4. Upload extracted theme folder into ..wp-content/themes/ directory.
5. Log into the WordPress admin panel.
6. Go to Appearance -> Themes.
7. Click on Activate theme.

A detailed video of theme installation is available here.

Note: If you get the error message “The package could not be installed. The theme is missing the style.css stylesheet.”, please unpack the .zip file that you have downloaded, and inside the unpacked .zip file you will find two more files – a parent and child theme. Install the parent theme first and then the child theme. Activate the child theme when the installation is done.

Required plugins

Before proceeding, make sure that the Gutenberg plugin is installed and active. More details about Gutenberg plugins and plugin files can be found here.

Edificio WordPress theme documentation, step 2: Theme customization

Setting up menus

Theme menus in the Edificio WordPress theme documentation can be created under Appearance -> Menus. Created menus can be used when working with templates using Editor.

The navigation menu can be changed in the Editor – you can easily replace the default menu with your own.

1. Go to Appearance -> Editor.
2. In the Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on the Browse all templates button.
3. In the templates screen, click on Template parts on the left-hand side. Click on the header.
4. The Menu placeholder is set. Click on it, and from the floating menu, click on Select Menu.
5. Save changes.

Using the theme Editor

The theme can be customized using the Editor feature. The Editor allows you to control the layout and elements of the page templates. Go to Appearance -> Editor. More details on how to work with the Editor are available on this link.

Setting up site logo

1. In the Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on the Browse all templates button.
2. In the templates screen, click on the Template parts on the left-hand side. Click on the header.
3. The Logo placeholder is already there. Click on the blue upload icon.
4. Upload or browse for the desired logo. The logo should be a .png or .jpeg file.
5. Save changes when you are done.

Setting up the site title

Site title can be set in the Appearance -> Customize, and under the Site Identity panel, you can set site title and favicon.

1. In the Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on the Browse all templates button.
2. In the templates screen, click on the Template parts on the left-hand side. Click on the header.
3. The logo placeholder is already there. Click on it, and from the floating menu, select Remove site logo.
4. Click on the header container and then on the plus icon, to add a new element. Search for the “Site title” element.
5. The Site title element will be placed on the far right of the header. Move it to the desired position.

Changing colors and fonts

Text and Colors settings are global settings that are applied to the whole site and all elements.

1. In the Site Editor, click on the Colors option in the right-hand side panel.
2. Set the desired colors for background, text, and links. The Color set will be applied to the whole site and all pages.

1. In the Site Editor, click on the Typography option in the right-hand side panel.
2. Here you can set the desired font families, size, line height, and weight for text and links.

Footer is fully customizable – you can set the desired number of columns and various elements (e.g., menus, text, logo). Please note that before setting up menus in the footer, you will need to create those menus in Appearance -> Menus.

Setting Book a call link

Book a call link is a button with an extra class “is-style-button-arrow”. If you remove this class, the button will go back to the normal state. – u kom smislu normal state?

1. In the Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on the Browse all templates button.
2. In the templates screen, click on the Template parts on the left-hand side. Click on the header.
3. Select Book a call block. Now you can set a link, change text or font size.
4. Save changes.

Replacing footer menus and setting links

In the footer element in the Edificio WordPress theme documentation, links are created as text links, not as menus. Each link should be modified directly through the Editor.

1. 1. In the Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on the Browse all templates button.
   2. In the templates screen, click on the Template parts on the left-hand side. Click on the footer.

 

• Remove or add elements and set links for the desired items.
• Save changes when you are done.

 

Adding a footer logo

By default, the footer uses three columns. You can add more columns if needed.

1. In the Site Editor, click on the down arrow, near the template name, on the top of the screen. Click on the Browse all templates button.
2. In the templates screen, click on the Template parts on the left-hand side. Click on the footer.
3. Click on “+” button in the middle of an empty column.
4. Add a Logo block. Click on the blue upload icon.
5. Upload or browse for the desired logo. The logo should be a .png or .jpeg file.
6. Using floating toolbox arrows, change the position of a logo column, or simply move the logo to the desired column.
7. Save changes when you are done.

Edificio WordPress theme documentation, step 3: Theme defined patterns

Patterns are predefined blocks that can be added to the content. Patterns are groups of several blocks, so their content – text, and images – can be edited.
Besides standard patterns, the Edificio theme comes with theme-specific patterns. To add a pattern, click on the block Add button, and then click on the Browse All button in the floating block picker. In the left-hand side panel, click on the Patterns tab, and then pick the desired pattern group from the dropdown.

1. TK Text
2. TK Contact
3. TK About
4. TK Testimonials
5. TK Gallery
6. TK Headers
7. TK Call to Action

To learn more about built-in patterns and how to work with them, please read our official guide WordPress Block Patterns.

Edificio WordPress theme documentation, step 4: How we built the Edificio demo

Before building the homepage, we suggest you create the desired pages and publish some posts and categories.

Then, move onto the following pages:

1. Home
2. About
3. Case Study
4. Journal
5. Contact

Homepage

The homepage in the Edificio WordPress theme documentation is built using several patterns and blocks. In the following text, you can read instructions on building the same homepage as shown in our demo. With a little bit of planning, you can create a homepage that will fully suit your needs, with more project categories, blog posts, etc.

The homepage is built from several sections. We will explain each section.

1. Introduction text – a short paragraph of text, set inside the left column. The line at the bottom is the separator element.
   
2. The next block is built from three columns – the text is placed in the left column, the middle column is left empty, and the right column contains an image. Read More is a button with the additional CSS class “is-style-button-arrow”.
   
3. The Services section is built using three columns. The left column contains a heading, followed by a paragraph. We added the CSS class “add-bullet” to add a bullet before the text. The middle and right column come with text that is separated by multiple separators.
   
4. The Case study section is built using column blocks. The first column block is used to left-align the intro text. The next three-column block consists of images, text, and buttons with the class “is-style-button-arrow”. For vertical alignment, we used a spacer element. In the third column block, we set four columns, where the first and third columns are empty, while the second and fourth contain images, text, and buttons.
   

About page

About page combines several elements.

1. Introduction text – a short paragraph of text, set inside the left column. The line at the bottom is the separator element.
   
2. The Columns block comes with three columns. An image is placed in the left column, and text in the middle column.
   
3. To create a History line, we inserted a group and set black background color and white for the text. Important dates are set as columns – the left column contains the date (the year), while the right column contains a short description. Before and after each date, we add a separator line.
   
4. The first element in the People section is a spacer, followed by a paragraph with the “add-bullet” class. After that come columns with image on the left, and text on the right. The Contact button has class “is-style-button-arrow”.
   
5. The Awards section is built the same way as the History block.

Journal

The Journal page is the page where all posts are displayed. There are no elements on this page. This page is using a template Index.

Contact Us

Contact Us page in the Edificio WordPress theme documentation contains only a short introduction text with contact details.

Edificio WordPress theme documentation, step 5: Additional CSS classes

Additional CSS classes can be inserted by selecting the desired element and adding that class to the Additional CSS class(es) field in the Advanced panel.

Theme classes that can be used:

• stick-to-top element will stick to the top of the screen, regardless of the page scroll.
• l-desktop-only element will appear only on computers.
• l-touch-only element will appear only on touch screen devices.
• l-above-mobile-only element will be shown only on devices with larger screen resolution.
• l-mobile-only element will appear only on mobile devices.
• l-center-margin-auto element will get automatic left and right margin, and will be centered on the screen.
• l-no-margin-top removes the top margin from the element.
• l-no-margin-bottom removes the bottom margin from the element.
• background-color–transparent element will get transparent background.
• padding–horizontal-default adds default padding for the element. This class will prevent the element from sticking to the left and right side of the screen. Padding values are 50px for computers, and 30px for mobile devices.
• no-padding–top removes the top padding from the element.
• no-padding–bottom removes the bottom padding from the element.
• no-padding–horizontal-on-touch removes left and right padding for all touch screen devices.
• no-padding–horizontal-on-mobile removes left and right padding for all mobile devices.
• h-animate–from-top element with this class will float in from the top, when it comes into the viewport.
• h-animate–from-left element with this class will float in from the left, when it comes into the viewport.
• h-animate–from-right element with this class will float in from the right, when it comes into the viewport.
• h-animate–from-bottom element with this class will float in from the bottom, when it comes into the viewport.
• add-bullet adds bullet before a paragraph. Used mostly for cosmetic changes.