Buttons
“page_section beige” – other colors are light_blue and light_magenta
“page_section” other options to be added to CLASS field – self-explanatory:
- full_radius
-
top_radius
-
bottom_radius
-
small_bottom_margin
-
no_bottom_margin
light_magenta full_radiuspage_section
page_section light_blue top_radius
page_section beige bottom_radius
page_section light_blue small_bottom_margin
page_section light_blue no_bottom_margin
page_section light_magenta top_radius no_bottom_margin
Two sections to make an illustion that this is only one – I used here light_blue so you can clearly see how it works.
page_section light_blue bottom_radius
How to make Image bleed to previous section
Adding a section with image bleeding (overlapping) previous section requires importing two sections in order to take effect.
Top section serves a double purpose:
– a closure to the previous section
– a room for the part of an image from the next section – otherwise the bleeding image would cover the bottom content of the previous section.
1. Wherever you want to add a new section with bleeding image, navigate there and click icon “Add container”.
2. A pop up window will open. Click on second tab “Library Containers” and find “Image Bleed Padding to prev Section” in listed tiles. Click on it.
3. New PADDING section has just been added to the Navigator. Make sure it has the same background color as the previous section. Then click “Add Container” again on that section.
4. Find “Image Bleed” tile and click on that.
Two new sections are now present in the Navigator.
5. Final thing is to edit a section before “Image Bleed Padding to prev Section”.
Click EDIT icon in the name of that section and scroll down to CSS portion. Add “no_bottom_margin”. If that section has all rounded corners (radius) make sure to swap “full_radius” to “top_radius” so rounded corners stay only at the top of the section.
Headings the Kids Konnect style
To make any heading (h1 to h6) stand out the Kids Konnect style, add this class to style section in element edit options.
When editing text use
– Italics to apply thin letters
– bold to apply gradient
By default the size of these headings are 48px, no matter what actual H you are gonna select.
If you want to apply bigger letters, 72px, add class ‘bigger‘ next to ‘kk_heading’.
To use smaller heading add class ‘smaller‘ instead of ‘bigger’.
Smaller class is 32px.
Every bolded section is turned into gradient. By default, there is this gradient:
Examples
Every bolded section is turned into gradient.
kk_heading (default)
Lorem ipsum dolor sit amet, consectetur adipiscing
kk_heading gradient_1
Pellentesque tincidunt rhoncus eros at molestie
kk_heading gradient_2
Pellentesque tincidunt rhoncus eros at molestie
kk_heading gradient_3
Maecenas nec luctus lectus, quis congue dolor
kk_heading gradient_4
Nullam venenatis sit amet sem et bibendum
kk_heading gradient_5
Nullam venenatis sit amet sem et bibendum
kk_heading gradient_6
Donec euismod luctus turpis, a suscipit dolor blandit at
kk_heading gradient_7
Donec euismod luctus turpis, a suscipit dolor blandit at
kk_heading gradient_8
Donec euismod luctus turpis, a suscipit dolor blandit at
kk_heading gradient_9
Praesent venenatis iaculis massa quis elementum
kk_heading bigger
Lorem ipsum dolor sit amet, consectetur adipiscing
kk_heading smaller
Lorem ipsum dolor sit amet, consectetur adipiscing
kk_heading left
Lorem ipsum dolor sit amet, consectetur adipiscing
kk_heading right
Lorem ipsum dolor sit amet, consectetur adipiscing
You can mix the classes to achieve required result.
kk_heading smaller left gradient_4
Lorem ipsum dolor sit amet, consectetur adipiscing
kk_heading gradient_9 bigger right
Lorem ipsum dolor sit amet, consectetur adipiscing
Make your MENU work like a charm!
First of all – menu and submenu consists of TWO separated elements – you need to keep that in mind, as it is VERY important.
First – you have to MANUALLY add all subpages to each parent menu
Here, main menu in English:
Here, main menu in Ingles:
For menu in OTHER languae you’ll have to re-do the steps.
Now:
You’ll gonna drag/drop pages from here, as you build up your page and fill it with content.
Here, since we DO NOT have actual pages, we’re gonna use CUSTOM LINK option.
Remember – this is for TESTING purposes only.
Later on, you’re gonna drag an existing page instead of using custom link (unless you you’re in need of doing so).
Now we have REGULAR WordPoress behaviour
Now the TRICKY PART comes in, but unfortunatelly we can’t omit this one.
Here we HAVE TO CREATE a MegaMenu with exact ID of submenu, so it points to the right portion of the menu.
The easiest way is to CLONE existing sub-menu where you will add sub-menu’s ID and also where you can change right column’s details.
What you’re gonna focus on here is PARENT parameter – don’t forget about quotes to wrap the output in!
You can try to use link’s LABEL (eg. “Solutions”, “Learn”, “Stories” etc) but using an ID is 100% working way.
How to find link’s ID?
Now the very, very tricky part.
First off, open web developer tool in your browser – this supported by every major browser – by pressing F12 key.
Firefox
Chrome
Hover over the link you want an ID of.
<li id=”menu-item-XXX” class
Grab the number and place this in shortcode of MEGA MENU area.
Here: 694
<li id=”menu-item-XXX” class=””>
Grab the number and place this in shortcode of MEGA MENU area.Here:
The last part of this is to connect MEGA MENUto actual link.
Select previously cloned (and renamed) mega menu.
To move menu item to OTHER section, add class ‘other’ in class field.
To add two-line element menu, use this pattern:
“Main text {comma} Text in gray shown in new line”, eg.
“Another link, Custom Lorem ipsum dolor”
ICONS.
Currently supported icons:
- – balloon – default
- – people
- – piechart
- – notepad
If this class is not defined, each link is printed out with the default icon.
Import CONTAINERS
Import COLUMNS
Shoulder to shoulder stories
People around the world love Ovivio
The Ovivio platform is basically a cheat-code for our childcare teams to allow them more time with the group.
The Ovivio platform is basically a cheat-code for our childcare teams to allow them more time with the group.
