Ruby - Blog WordPress Theme - BioButterfly Web Agency

Ruby Installation

Creazione delle pagine

Importazione Menu

Installazione Plugin

Ruby richiede l’installazione di quattro plugin per funzionare. Per farlo devi andare in "Aspetto - Install Plugin".

BioTools
Contact Form 7
Essential Grid
RoyalSlider

BioTools

Questo plugin attiva il Portfolio e altre opzioni.

Contact Form 7

Per creare il tuo modulo di contatto vai su "Contatti - Aggiungi nuovo" dal menu principale di WordPress e segui queste istruzioni:
Inserisci un titolo al tuo nuovo modulo di contatto e il seguente codice nel campo del modulo di contatto, come nella schermata qui sotto.

Inserisci i seguenti codici nelle sezioni corrette:

Salva e copia il tuo modulo ID di Contact Form 7 (evidenziato in rosso verso l’alto nella schermata precedente).
Ora vai su "Aspetto - Widget" e attiva il widget "Contacts Area", questo widget è il tuo modulo di contatto. Usa il widget di testo per aggiungere questo shortcode:

contact-form-7 id="Tuo ID" title="Contacts Area"

In "Tuo ID" incolla l’ID generato.

Lasciare il resto invariato e salvare.

Essential Grid

Vai in "Ess. Grid » Import / Export". Seleziona "Import".

Con: "ess_grid-only-grids-and-custom-skins.json" - Questo file carica solo i contenuti personalizzati di Essential Grid, i file predefiniti sono già installati. (consigliato)

Scegli il file di impostazione "ess_grid-only-grids-and-custom-skins.json" (disponibile all’interno di Ruby ZIP) e fare clic su "Read File.

Fare Click su "Import Select Data". Se tutto è andato a buon fine, le griglie sono pronte per l’uso.

Con: "ess_grid-all-contents.json" - Questo file carica tutti i contenuti predefiniti e personalizzati di Essential Grid, se si utilizza questo file si sovrascrive il contenuto di default.

Choose the setting file "ess_grid-all-contents.json" (disponibile all’interno di Ruby ZIP) e fare clic su "Read File.

Seleziona "Overwrite Existing" e fare click su "Import Select Data". Se tutto è andato a buon fine, le griglie sono pronte per l’uso.

Vai in "Appareance » Widgets" per abilitare le griglie.

Essential Grid Skin

Con le potenti skin di editor di "Essential Grid", puoi creare o modificare skin per gli elementi del tuo portfolio.

Vai in "Ess. Grid » Item Skin Editor", scegli la tua skin preferita e fai clic su modifica.

RoyalSlider

*IMPORTANTE* Vai a "Royal Slider - Impostazioni" e seleziona "On every page (overrides all other options)".

Home Slider

Vai a "RoyalSlider » Add New". Crea un nuovo "Custom" slider. Chiamalo "Home Slider".
È molto importante seguire le impostazioni per visualizzare tutto correttamente:

General Option: Default
Skin: Header Slider
Size & Scaling:
- Width: 100%;
- Height: empty
- Auto scale slider: check;
- Base width 2560;
- Base height 612;
- Auto height: uncheck;
- Slides spacing: 0
Image Options:
- Image scale mode: Fill the area;
- Image align center: check;
- Image scale padding: 0;
- Lazy-loading: uncheck;
- Main image width 1670;
- Main image height 400;
- Thumb image width: empty;
- Thumb image height: empty;
Bullets: None

Crea la classe per le diapositive

Create New Slide
Block Editor
Block CSS Class - Add New Class
Create: "AbTextAlignLeft" e "AbTextAlignRight". These classes will be used to move the text to the left or right in the slide.

Aggiungi le tue foto e salva.

Vai in "Aspetto » Widgets" e abilita lo shortcode.

Gallery Blog Post

Vai in "RoyalSlider » Add New". Crea un nuovo "WordPress Gallery" slider. Chiamalo "Gallery Blog Post".
È molto importante seguire le impostazioni per visualizzare tutto correttamente:

Questo slider viene utilizzato per aggiungere una galleria personalizzata sulle pagine del blog. Segui le istruzioni per l’uso corretto di RoyalSlider nei post.

General Option: Default
Skin: Blog Slider
Size & Scaling:
- Width: 100%;
- Height: empty
- Auto scale slider: uncheck;
- Auto height: check;
- Slides spacing: 0
Image Options:
- Image scale mode: Fill the area;
- Image align center: check;
- Image scale padding: 0;
- Lazy-loading: uncheck;
- Main image width empty;
- Main image height empty;
- Thumb image width: empty;
- Thumb image height: empty;
Bullets: None

Aggiungi le tue foto e salva.

Single Project Slider

Vai in "RoyalSlider » Add New". Crea un nuovo "WordPress Gallery" slider. Chiamalo "Single Project Slider".
È molto importante seguire le impostazioni per visualizzare tutto correttamente:

Questo slider viene utilizzato per aggiungere una galleria personalizzata sulle pagine del blog. Segui le istruzioni per l’uso corretto di RoyalSlider nei post.

General Option: Default
Skin: Project Slider V1
Size & Scaling:
- Width: 100%;
- Height: empty
- Auto scale slider: uncheck;
- Auto height: check;
- Slides spacing: 1
Image Options:
- Image scale mode: Fill the area;
- Image align center: check;
- Image scale padding: 0;
- Lazy-loading: uncheck;
- Main image width empty;
- Main image height empty;
- Thumb image width: empty;
- Thumb image height: empty;
Bullets: None