The project is available only in Total version, and includes the admin side for content management, based on Total CMS.

The Total version consists of two separate project files:

• 1 project file for the front-side.
  
• 1 project file for the admin-side.
  

In this way the project management in RapidWeaver becomes more agile, being able to put side by side the windows of the two projects and having everything at hand.

• All the front-side pages you see in this demo.
  
• All the admin-side pages you see in this demo.

All pages are set with TCMS to be fully managed from the admin-side.
Exceptions are only the project presentation pages (Overview page and Extra menu pages).

• RapidWeaver 8
• Stacks plugin

• Foundation 6 stacks
• Swatch Pack stack
• Total CMS stack
• SEO Helper 2 stack
• Chroma stack FREE STACK
• Pen stack FREE STACK

Optional stacks are not necessary, but they improve the user experience.

• Page Safe stack (handles the credentials and background image of the login page)
• Drift Pro stack (handles the animations)
• Photo Pro stack (enhances the user experience of image galleries)
• Compass stack (handles the buttons to navigate between blog posts)
• Share It stack (handles the share buttons on the blog post pages)
• MovingBox stack (enhances the user experience of image/post slideshows)

You can enable/disable the optional stacks easily from the admin-side in Settings page → Optional Stacks tab.

• Click here for more information about the optional stacks.

• Upload the cms-data folder (you will find it in the downloaded ZIP file) to your server, in the root directory where you will publish the site.
• For both project files (admin-side and front-side) enter the Web Address data in the RW General settings (the web address must be exactly the same in both project files).

• For both project files (admin-side and front-side) enter your domain data in the RW Publishing, of course you will need the FTP information of your server (the data must be exactly the same in both project files).

Total CMS license

• In the admin-side project file: open the Admin Core & CMS Core partial and enter the Total CMS license in both Total CMS core stacks.
• In the front-side project file: open the CMS Core partial and enter the Total CMS license in CMS Core stack.
• Publish the project file.

For project blogs to work properly, the following procedure must be performed for each blog in the project, which is used to tell TCMS the blog path.

• Open the front-side project file and go to the blog post page, for example the Blog > Post page.
• Select the Blog Post stack and enable the Pretty URL and Show htaccess Rules as shown in the screenshot below.

• Run the page Preview.
• The Save Blog Post URL lightbox will be shown to confirm the path of the blog posts, as shown in the screenshot below.

• Before clicking the Submit button, select and copy the displayed code (starts with the # symbol).
• Once copied, click the Submit button to confirm the blog post URL.
• You can now disable the Show htaccess Rules button from the Blog Post settings.
• Now go to the RW Publishing settings and click the Edit .htaccess File button, as shown in the screenshot below.

• Paste the code you copied earlier into the text area and click the Save and Upload button.

As soon as the site is published, it will have the same settings as the project demo site. So now you will need to do now is log in to the admin-side and define the settings by entering your company/personal information (logos, site domain, social pages, etc.). Log in on the admin-side, then type the URL www.yourdomain.com/admin in the browser address bar and then enter the demo password.

Visit the Settings page and, first, define all the settings in the following sections:

• General Settings
• Optional Stacks
• Profiles
• Forms

The sections shown above are those that contain important company (site owner) data that are used in the pages of the website.
After that you can turn to defining the other settings:

• UI Elements
• Colors

After you have filled in all the settings, you are ready to start entering website content!

The project offers many settings but don't worry because if you forget some of them a warning message will tell you what you still need to set, like as you see in the following screenshot:

The Settings page is very important, from there you define all the main settings for the website. At the top you will find tabs that divide the information into main sections, here are what they are:

• General Settings
• Optional Stacks
• UI Elements
• Colors
• Forms
• Profiles

The General Settings tab is structured as follows:

Website URL

Here you set the web address of your site; it is important because many pages and links in the front-site refer to this information.
Remember to enter the web address without the / sign at the end.

Website Logos

Here you can set up logos for both front-side and admin-side. You have many settings available, here are some of them:

• You can choose the logo format (vector or bitmap)
• You can set different logos for navbar, mobile, footer
• You can set logo size by widths (small, medium. large)
• And much more

Embed Code

Here you can enter code into front-side pages, such as web analytics services (e.g., Google Analytics) or other external services.

Optional stacks are not necessary, but they improve the user experience. You can enable/disable the optional stacks easily from this section.

This project uses the stacks listed below. If you do not have them, it is not a problem because the project will either fall back on the similar standard F6 stack or ignore them completely.

• PageSage stack
  Manages the credentials and background image of the login page. If disabled, the project falls back to the TCMS Protect stack.

• Drift Pro stack
  Manages the entry animations of images and elements in the background of some sections of the site. If disabled, the project will ignore it altogether.

• Photo Pro stack
  Enhances the user experience of image galleries. If disabled, the project falls back to the TCMS Gallery stack.

• Compass stack
  Manages the buttons to navigate between blog posts. If disabled, the project will ignore it altogether.

• Share It stack
  Manages the share buttons on the blog post pages. If disabled, the project will ignore it altogether.

• MovingBox stack
  Enhances the user experience of image/post slideshows. If disabled, the project falls back to the F6 Slider stack.

Here you can define the settings of all the main elements/sections of the website, the ones that are basically present on all the pages of the website. The UI Elements tab is structured as follows:

Browser Elements

Here you can set new styles for the scroll bar and enable a custom cursor.

Mobile Menu

Here you can set the type of mobile menu: side or overlay menu.

Search Bar

With the Search Bar you can search for blog content. It is displayed by clicking on the search icon in the navbar.

Top Bar

When enabled, the Top Bar is the bar displayed just above the main menu (navbar) on each front-side page. Useful for displaying important information.

Navbar

The navigation bar is the main menu, the one displayed in desktop view (large).
You can set the background colors globally (i.e., the same for all pages on the site) or by page, and in this case you will have to go to each admin-side page and set the background colors in the Navbar section.

Contact Widget

The Contact Widget is the contact form on all front-side pages that is activated by the button displayed in the bottom corner of the browser.

Footer

Here you can manage footer settings and information.

In this section you can manage the front-side website colors. You can set your own color palettes (Custom Colors 1 and Custom Colors 2).

How to create your own custom color palette:

• Under Palette select one of the two available custom palettes.
• Then at the corresponding tab click on the color swatches to edit them.
• Save, and then visit the front-side pages.

In general about colors:

• Keep in mind that colors are global, when you change a color that color changes globally across the whole project. For example, if you change the primary color, every element of the project with that assigned color will undergo the change, regardless of whether that element is a text, a button, a menu, background color or any other element.
• As the primary color must be set a medium-dark or dark color , that is, a color such that a white text over on it reads well.
  On the other hand, a secondary color must be set a medium-light or light color , that is, a color such that a black text over on it reads well.

Here you can define the settings of the 4 types of forms in the project.

Contact Form

The Contact form is the one found on the Contact pages and in the Contact Widget.

Sign Up Form

The Sign Up form is the form found in the footer.
This form is for the sole purpose of receiving email from users who submit the form. It does not store email addresses in lists and is not linked to external email marketing services.

Join Us Form

The Join Us form is the form found in the About pages.

Coming Soon Form

The Coming Soon form is the form found in the Coming Soon page.
This form is for the sole purpose of receiving email from users who submit the form. It does not store email addresses in lists and is not linked to external email marketing services.

Company Profile

The Company Profile is the profile of the website owner. Some of these details are used in the front-side

User Profile

The User Profile is the profile of the administrator of the website. These details are only used in the admin side.

Webmaster Profile

This data will be displayed in the side Help Panel and in the credits in the footer of the admin-side.

If you are making a website for one of your clients, we recommend that you hide this section so that it is visible only to you.

Each form in the project is independent of the others in the sense that it has its own settings (email addresses, content, templates, etc.) and therefore each form can have different settings from the others.

By default, all forms use the Simple Email Template (we called it that and you can find it in the Website Owner and Website User tabs).
The Simple Email Template is basically a simple text email with your company logo inside.

If, however, you want a more professional look for your email, then you should enable HTML Email Templates.
Once HTML Email Templates is enabled, the Simple Email Template is ignored.

The HTML Email Template, as the words themselves say, is a template based on HTML code with which it is possible to give a professional look to emails sent from forms. The code must be entered in the appropriate section in HTML Email Template Code (located at the bottom of the HTML Email Templates section).

With the "HTML Email Templates" you can:

• Customise the Primary Color Email, i.e. the identifying colour of the email.
• Customise the text content of as many as 4 areas of the email: Content #1, Content #2, Content #3 and Content #4 (both for the email intended for the site owner and for the email intended for the user who submitted the form).
• In each of these 4 contents you can use one of the macros (as shown in the table) so that you can include special content (such as the username) in the email.

The project already has an html code set up in HTML Email Template Code.
This code gives the email the appearance as shown in the example image, and contains macros so that you can customise its content with Contents #1, #2, #3 and #4.

Be careful because if you change this code, the customisation of the 4 content areas may no longer work.

For the sake of clarity, the project file used to generate the code of the HTML Email Template is also delivered with the project file.
You will need the Email stack to be able to edit this project file in RW.

Of course, in HTML Email Template Code it is possible to insert the code of a template that is completely different from the one proposed and supplied with the project, whether modified directly in RW or generated with other software.
However, care must be taken to correctly insert macros into the template, so that the data filled in the form by the user are incorporated into the e-mail template.

The SEO content of all pages is managed using the SEO Helper stack. Compared to all other pages on the website, on all home and blog post pages in the project SEO Helper stack is set up slightly differently so that structured data is generated. Thanks to the structured data, Google better understands the content of the page and classifies it correctly.

The only thing you have to do is to enter your SEO content directly from the admin-side, in the SEO section on each page:

Or from the SEO page, where SEO content from all pages of the website is collected in one place.

SEO Helper stack is set up to create a sitemap of sitemaps, you no longer have to remember to submit new sitemaps to search engines.

First you can disable Generate Search Engine Sitemap option from the RadpiWeaver Settings → Advanced page in the left panel inspector, as shown in the screenshot below:

In this project you will find two pages about the sitemap:

• Sitemap Index
• Pages Sitemap

This page is a sitemap of other sitemap files. The first referenced sitemaps is the home page of the project . The other two are the sitemap files created by Total CMS Blog for the Portfolio and Blog.

• If you have changed the ID of the blogs (blog and portfolio) or you have added a new blog to your site make sure to set the URLs to match your published blogs.
• If you have added new blogs in your website remember to add them in this list below.

This sitemap contains all of the pages within the project. You can define the change frequency and priority of those pages so that search engines have a hint as what pages are more important.

• If you have added new pages in your website remember to add them in this list below.

On the project file, the structure of the front-side pages looks like the screenshot below.

To facilitate understanding of the content, each section of the page is enclosed into Pen stack with the name of the section. Similarly, and with the same names, the corresponding admin-side pages will be structured, as you can see in the correspondent admin-page in the next section below.

• Green Pen stacks represent everything related to styles (included the Site Styles stack) and the CMS Core stack.
• Yellow Pen stacks represent everything that has to do with the interface elements of the page.
• White Pen stacks represent the real content sections of the page.

With the same concept as the front-side pages, the structure of the admin-side pages looks like the screenshot below.

To facilitate understanding of the content, each section of the page is enclosed into Pen stack with the name of the section. Similarly, and with the same names, the corresponding front-side pages will be structured, as you can see in the correspondent front-page in the previous section above.

• Green Pen stacks represent everything related to styles (included the Site Styles stack) and the Total CMS stacks (Admin Core, CMS Core and Protect stacks).
• Yellow Pen stacks represent everything that has to do with the interface elements of the page.
• White Pen stacks represent the real content sections of the page.

The project core is the partial COMMON STYLES, it contains the Site Styles stack and all other styles.

The styles, within the partial COMMON STYLES, are organized within other Pen stacks based on type.

To quickly show/hide the Pen stack content just select it and then press Shift+H or double-click the title of the stack.

At the bottom of each section of the Style Guide section is a box with a dashed green border indicating where to find styles related to the topics covered in that section.

Example:

This section explains how the COMMON STYLES partial is structured so as to understand its logic and be able to better manage all styles. When you open the partial you will find the following Pen stacks inside it which represent the main types of styles of the project:

• SITE STYLES Pen stack, contains the Site Styles stack.

• COLOR SETTINGS Pen stack, contains all styles about colors.

• ELEMENTS Pen stack, contains all styles (except the color styles).

• EFFECTS Pen stack, contains the effects styles (eg. hover effects).

This Pen stack contains the Site Styles stack. Make any changes you want but completely ignore the site colors, text colors, and text sizing settings. These styles settings can be found inside the COLOR SETTINGS and ELEMENTS Pen stacks.

This Pen stack contains all styles about colors.

• COLOR PALETTES Pen stack is where we need to set all the colors of the project.
  These colors are global, so when you set/change a color, all elements that have that color will be changed globally across the entire project. If you are looking to set/change a color, this is where you need to do it.
  Inside it also the CUSTOM COLORS Pen stack, in which styles for custom colors palettes are included.

• ELEMENT COLORS Pen stack is where we assign the colors (set in the COLOR PALETTES Pen stack) to all elements (eg. text, buttons, tabs, backgrounds, etc.).

In practice, in the first Pen stack (COLOR PALETTES) we set the colors and in the second Pen stack (ELEMENT COLORS) we assign that colors to the various elements of the project.

This Pen stack contains contains all styles (except the color styles) of each project element. The styles are organized by type of element in additional Pen stacks.

This Pen stack contains the effects styles (eg. hover effects or element animations).

Let's say we want to add a yellow background color to a 1 Column stack, here's how:

• Create a new style, simply adding the desired swatch (based on your need) into the Swatches stack.

• Set the background color and enter a class name to the style in the stack settings panel.

• Select the stack you want add the new style, in this case the 1 Column stack.

• Enter the class name in the Custom Classes textarea in the HTML section in the stack settings panel.
  Remember that the class name cannot have blank spaces and start with a number. Use the dash to separate words.

• After adding the class name in the stack settings panel the stack will be displayed with the new style applied.

To set up the 404 Not Found page correctly you need:

• A page to show.
• Insert a line of code in the htaccess file.

Once you choose the page (this project offers at least one) and its URL you have to insert the code in the htaccess file, here's how to do it:

• Go to the RW Publishing settings and click the Edit .htaccess File button.

• The following lightbox will open, so click on the text area and enter ErrorDocument 404 followed by the full path to the page you want to show, like this:

ErrorDocument 404 https://www.agency.rwpro.space/pages/error-404/index.php

• Click the Save and Upload button.

Egestas massa, tristicue in augue. Epit sceperiscue nisi, eu bibendum pectus viverra cuam. Mapesuada pupvinar integer peppentescue convappis apicuet nec. Leo pobortis teppus, dui enim nunc morbi. Luctus vitae apicuam massa facipisis uppamcorper pectus. Quam pacinia tincidunt porem massa. Sed sed apicuam sapien vep et.

First of all, to use custom icons you need to set the class for the accordion title into the FontAwesome 5 swatch, in this way:

• Open the STYLES COMMON TO ALL PAGES green Pen stack; then ppen the SITE STYLES Pen stack and select the Font Awesome 5 swatch:

• Make sure to add the accordion-title:before class within the CSS Selector text area. In this way we set the Font Awesome font for the accordions title icons:

• At this point, just go to the Font Awesome site, choose an icon and copy the its Unicode value.
  Make sure to use icons of Font Awesome version 5 only.

• In the Accordions stack settings make sure to enable Use Custom Icons?. Then paste the Unicode values into the "Open" and "Close" fields. Make sure to enter the \ symbol before the Unicode value.
  
• The Use Custom Icons is a global feature, it will change the icons on every Accordion stacks on the page.

The partial is simply a group of stacks with a fantastic feature: if you place the same partial several times on a page or on different pages, for example on pages A, B and C, and then you modify the partial only on page B, it happens that these changes will also propagate on the same partial positioned on the pages A and C.
In practice, by modifying only one partial, all its instances (or copies) that you will have placed in other pages of the project will also be modified.

• Select the stack you want transform in partial and then click the green Partial button at the top left.

• From the stacks settings you can assign Title, Subtitle, Author and Tags. You can also just assign the Title (give it a name that makes sense to you based on its content).
• Use Tags to better organize your Partial Library and divide your partials into groups.

• At this point, you will find the partial just created in the Partials Library.

• To view the Partials Library click the green cubes icon () on the left vertical menu of Stacks.

• Just double click on it, no matter if it is on the page or directly on the Partials Library.
• Make the changes you need.
• Click the blue Back button at the top left to close (and save) the partial.

• First select the partial (the partial must be on the page).
• Click the green Unpack button at the top left.

When you unpack on a partial, the partial simply transforms into a normal group of stacks, and is therefore totally independent from the other instances of that partial you just unpacked on that page.
If you unpack on a partial which is present on several pages, they will not all be unpacked, only the one you have unpacked will become a normal stack group (all other instances will remain as partial).

• Open the project file with partials.
• Drag the partial (or more partials) you need onto the page.
• Select the partial (or more partials).
• Copy them.
• Paste them on the page of the other project file.
• Now you will find those partials also on the Partial library of this other project file.

Partials are well organized, be sure to arrange the Stack Library as follows:

• Click on the Library Settings icon.

• Select Arrange Stacks and then click on the By Tag.

• In this way all partials included in the project are now arranged correctly, sorted and divided by groups.