Domain creation

This WordPress instance is a multisite installation. Which means that multiple domain can be managed from this single WordPress.

Domain creation

For any new domain, please contact Cyril PHAM-LE.

Accessing a domain

To access a given domain for administration, follow the below steps:

  1. Connect on any domain admin by using the main URL and adding /wp-admin at the end (i.e. reim.realestate.bnpparibas/wp-admin)
    capture-decran-2016-10-19-a-18-25-39
  2. Move your mouse on “My Sites” > “Network Admin” > “Sites”
    capture-decran-2016-10-19-a-18-26-18
  3. Click on the link “Dashboard” on the desired site.
    capture-decran-2016-10-19-a-18-27-07

Site creation

Creating a page using Visual Composer

Visual Composer (VC) is a plugin that greatly helps creating content by providing small “components” that can be dragged and dropped on a grid, also provided by Visual Composer.

 

There are three depths of page creation using VC:

  • Line: A page is divided in lines. Each line take the full width of the page and a height depending on the content
  • Column: A line is divided in columns (a maximum of 12). Each column take the width defined by the proportion defined. For instance, if a line is divided in three columns, each of 4/12 of the total width, each column will be granted a third of the total width.
  • Component: A column can host component, which are the smallest content possible. Multiple components can be placed in a column. A component can be for instance a single image, a text, a slideshow, a form, etc.

 

To create a page, follow the below steps:

  1. When on the dashboard of a site, go to “Pages” > “All Pages”
    capture-decran-2016-10-21-a-11-53-13
  2. Click on “Add”
    capture-decran-2016-10-21-a-11-54-07

To create a line, follow the below steps:

  1. If there is no element on the page, click on “Add Element”
    capture-decran-2016-10-21-a-12-17-45
  2. If there are already some elements, click on the white “+” with a grey background
    capture-decran-2016-10-21-a-12-18-47
  3. A pop-up to choose an element will be opened. After choosing an element, a new line is created
    capture-decran-2016-10-21-a-12-22-10

To create columns in a line, follow the below steps:

  1. On a line, click on the icon to choose the number of columns (top left of a line)
    capture-decran-2016-10-21-a-12-27-16
  2. Choose a preconfigured number of columns or click on “Custom”
    capture-decran-2016-10-21-a-12-28-28
  3. A new pop-up to enter custom number of columns will be opened. Enter the number of column in a fraction style:
    capture-decran-2016-10-21-a-12-30-14
  4. Click on “UPDATE”. Columns will be displayed
    capture-decran-2016-10-21-a-12-32-41

To add a component in a column, follow the below steps:

  1. Click on the plus in an empty column or a plus below an existing component:
    capture-decran-2016-10-21-a-12-46-47    capture-decran-2016-10-21-a-12-46-49
  2. A pop-up will be opened with all the available components:
    capture-decran-2016-10-21-a-12-47-46

Possible parameters for each depth

Each element (line, column and component) have additional parameters. When clicking on the pen to edit an element, it is possible to edit these parameters in the different tabs:

capture-decran-2016-10-21-a-14-18-24

 

Line parameters are:

capture-decran-2016-10-21-a-14-19-15

 

Column parameters are:

capture-decran-2016-10-21-a-14-19-46 capture-decran-2016-10-21-a-14-19-51

 

Component parameters are:

capture-decran-2016-10-21-a-14-20-39

Linking pages with a menu

To create a menu, follow the below steps:

To create a menu, follow the below steps:

  1. From the back-office, go to “Appearance” > “Menus”
    capture-decran-2016-10-21-a-14-37-29
  2. Click on “Create a new menu”
    capture-decran-2016-10-21-a-14-48-54
  3. Give a name and click on “Create Menu”
    capture-decran-2016-10-21-a-14-49-18
  4. Select the menu to edit
    capture-decran-2016-10-21-a-14-49-36
  5. Add page from the left list and then save
    capture-decran-2016-10-21-a-14-48-31

To configure a menu in a page, follow the below steps:

  1. Edit a page
  2. On the right side, there is a panel named “Menu”. Fill the required information and save the page.

Note that if there is a contact form that is configured, do not forget to add a unique complementary ID. It is used to make the form works correctly. It is absolutely necessary. The ID has to be unique inside a page.

capture-decran-2016-10-21-a-14-52-34

Filling the other parameters of pages

When creating a page, the following parameters can be applied.

  • Category: It is mandatory and used to sort between the different pages (sorted in campaigns). A page can have only ONE category (even if the tool allows to add more).
    capture-decran-2016-10-21-a-14-56-32
  • Style: The style is mandatory to define the look and feel of the page. It will be set to the base layout.
    capture-decran-2016-10-21-a-14-57-22

BNP Components list

Contact form

Component used to display a form created with the plugin BNPLP Contact Form.
Do not forget to add a complementary ID. It is necessary and used to make the form work correctly.

Argument

It is used to display information to be highlighted. It can have a pictogram or a picture placed on top, left, right or below the content. The content is a title (of level h3), a text and a button (link anchor, external link, download document).
Each content is optional.

Accordion

It is used to condense heavy information such as interview into an accordion to have a better presentation

Partner

It is used to present a list of partner with their logo and optionaly with links to their website on the logos.

Video Youtube

It is used to display a video with a splashscreen containing a picture and a title.

Header with image

It is used to display a big image or video with a big title and subtitle and an action button (form, link).
It is used to introduce a page and immediately appeal the visitor.

Gallery

It is used to display pictures by defining the number to display by row.
On hover, the alternate name of the image is display on a green background.

Prefooter & Footer

These two components are used together.
Prefooter displays an image and a big short text with a button to go up the page.
Footer displays a logo, copyright and links (to cookie policy fo instance)

Available CSS classes

The following listing presents all custom CSS classes that can be used to add a page some look & feel and functioning.

Be careful to use these classes only for the explained cases and not anywhere else. If misused, it can produce strange behavior as the classes not only add CSS properties but also Javascript behavior.

DO NOT try to use same CSS classes found by inspecting the source code of a page to create a page.

  • bnplp-line-four
    • Use case: on a line containing FOUR components of type Argument (Custom BNP component)
    • Benefits: It sets the line to 80% of the full width, sets equal heights for every argument of the line, sets the titles at the same vertical position, sets the text at the same vertical position and sets the buttons at the same vertical position
  • bnplp-line-three
    • Use case: on a line containing THREE components of type Argument (Custom BNP component)
    • Benefits: It sets the line to 80% of the full width, sets equal heights for every argument of the line, sets the titles at the same vertical position, sets the text at the same vertical position and sets the buttons at the same vertical position
  • bnplp-inline
    • Use case: on a field of a form of type radio button
    • Benefits: Sets radio choices on the same line
  • bnplp-section-nomargin
    • Use case: on a line
    • Benefits: Remove the margin of 100px that is set by default
  • bnplp-layer-image-text
    • Use case: on a line of two components (one single image and one text)
    • Benefits: Combining with nomargin class and background color, it can set the below layout (which has two lines with this class)

capture-decran-2016-10-21-a-16-05-17

  • bnplp-bg-grey
    • Use case: on a line
    • Benefits: Set the background color to BNP grey
  • bnplp-bg-green
    • Use case: on a line
    • Benefits: Set the background color to BNP green
  • bnplp-item-shadow
    • Use case: on a component
    • Benefits: Set an external shadow
  • bnplp-label-show
    • Use case: on a form field
    • Benefits: Set to display the label of the field (the default stylesheet “base” hides the labels of forms)
  • bnplp-button-fullwidth
    • Use case: on a form field of type submit
    • Benefits: Set to display the submit button to full width of a form