• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Quick guide to customize Pepe

Denis

Support
Staff member
Admin
#1
Hi,
in this guide I will explain how to customize Pepe in a few simple steps.
Let's begin! :)

Customization with import of the Demo

As soon as you have installed and activated Willer, you will notice a Notification advising you to install Plugins.
So the first thing you need to do is to install and activate the Plugins.

Now in the Dashboard in the "Appearance" Menu you have seen an entry "PEPE Import Demo".
Enter this menu.
From the "PEPE Import Demo" menu, you will see the demos you can choose.
Choose the one you want and with a simple click you will import the demo.
Wait about 3 minutes (It also depends on the speed of your connection) and you will already have your site equal to the demo you have chosen.:)

Now you can change the content as you see fit, and customize it as you wish.


Customization without Demo

As soon as you have activated Pepe on your Homepage you will have the latest articles published.

In order in the Customizer

General Option

1 Header -> Blocks -> Block Top
Choose the Layout for the Top Header
Enable/Disable Box width
Show Login, Show Menu, Show Social
Background Color, Color
Block Logo
Choose the Layout for the Logo Header
Enable/Disable Box width, Margin Top Block (em Unit), Margin Bottom Block (em Unit), Header Background Color
Logo, Font Size Logo (px Unit),Logo alignment
Site Title, Tagline, Display Site Title and Tagline, Font Size Description Title (px Unit, Font Size Description Subtitle (px Unit), Description Color, Display Site Title and Tagline, Description alignment
Show Banner, Margin top and botton Banner (px Unit), Choose whether to use a post or a widget.(Recommended widget: Advanced Ads), Select Post for Banner (Only if you have selected Post!), Text Button Banner Only if you have selected Post!, Background Color Banner, Color Banner Only if you have selected Post!, Background Color Button Banner Only if you have selected Post!, Color Button Banner Only if you have selected Post!
Site Icon
Enable/Disable Banner in Responsive
Background color Header in Responsive
Color Header in Responsive
Select image Logo for Mobile
Width Logo (px Unit)
Enable/Disable Description Site in Responsive
Font Size Description Title Responsive (px Unit)
Font Size Description Subtitle Responsive (px Unit)
Block Menu (The third level menu in responsive mode could give problems on very small screens!)
Enable/Disable Box width
Enable/Disable sticky Menu
Enable/Disable search form Menu
Font Size Menu (px Unit)
Padding Menu (px Unit)
Background Color, Color
Block News
News Header Layout
Enable/Disable Box width
Enable/Disable this section
Text News
Select Category News
Show Date and Time
Show Time

Header -> Layout -> Choose the Layout for the Header

Header -> Header Image
Click “Add new image” to upload an image file from your computer
Height Image Header (px Unit)
Object Fit Image Header

2 Body -> Blocks ->Block Card
Show Card Appare Effect
Show dark shading
Card Layout
Margin Top and Bottom (em Unit)
Card One, Two Large, Three, Four
Select Category for post Card
Show Category Card
Show Comments Card
Effect Hover Card
Background Color Card
Block Card with Slider
Show Card Appare Effect
Show dark shading
Margin Top and Bottom (em Unit)
Select Category for post Slider
Show Category Slider
Show Icons Slider
Card One,Two,Three
Select Category for post Card
Show Category Card
Show Comments Card
Effect Hover Card
Background Color Card
Block Slider with Tab
Choose the Layout for the Block Slider with Tab
Margin Top (em Unit), Margin Bottom (em Unit)
Select Category for post Slider, Show Category Slider, Show Author and Date Slider, Enable or disable effect fade Slider, Show Nav Controls Slider, Show dark shading Slider
Show Category Post in Multi-tabs
Title Tab One/Two/Three,Icons for Tab One/Two/Three, Select Category for Tab One/Two/Three
Block One (This block has 1 Sidebar Widget Area!)
Choose the Layout for the Block One
Margin Top (em Unit), Margin Bottom (em Unit)
Enable or disable Sticky Sidebar
Enable or disable Sidebar in Mobile Devices
Block One Title,Title Style, Background Color Title, Color Title
Show Category, Show Comments, Show Author and Date
Block Two (This block has 2 Sidebar Widget Areas!)
Choose the Layout for the Block Two
Choose the order for Sections
Margin Top (em Unit), Margin Bottom (em Unit)
Enable or disable padding 0 content
Enable or disable Sticky Sidebar
Enable or disable Sidebar in Mobile Devices
Great Post
Select Posts
Show Category
Show Comments
Show Icons
Background Color and Color Great Post
Category Badge Background Color and Color
Comments Badge Background Color and Color
Small posts
Select Category for post for Small posts
Number Post
Title for Small posts
Title Style
Background Color and Color Title
Show Comments for Small posts, Show Date for Small posts, Show Author for Small posts
Block Three (This block has 2 Sidebar Widget Areas!)
Choose the Layout for the Block Three
Margin Top (em Unit), Margin Bottom (em Unit)
Enable or disable Sticky Sidebar
Enable or disable Sidebar in Mobile Devices
Title Style
Background Color and Color Title
Title Pepe Sect Three
Title Tab 1/2/ 3/4
Icon Tab 1/2/3/4
Select Category, Show Comments, Show Date, Show Author, Select Category for post(Bottom) 1/2/3/4
Block Four
Image Pepe Four, Height Image (px Unit), Object Fit Image
Margin Top (em Unit), Margin Bottom (em Unit)
Choose whether to show a Widget or text in the Banner(You must insert the Mailchimp for WordPress Widget, activating the relevant Plugin. Other widgets are not supported!)
This is the recommended code for setting up the plugin form:
HTML:
<p>
    <label>
        <input type="email" name="EMAIL" placeholder="Your email address" required />
</label>
</p>
<p>
  No spam, notifications only about new products, updates.
</p>

<p style="float:right">
    <input type="submit" value="Sign up" />
</p>
Background Color Banner, Color Banner
Text Banner, Textarea Banner
Text Button Banner, Link Button Banner, Open the link on another page, Background Color Button Banner, Color Button Banner
Block Five (This block has 1 Sidebar Widget Area!)
Choose the Layout for the Block Five
Title, Title Style, Background Color and Color Title
Margin Top (em Unit), Margin Bottom (em Unit)
Enable or disable Sticky Sidebar
Enable or disable Sidebar in Mobile Devices
Select Category for post, number post, Show Comments, Show Date, Show Author
Enable or disable Posts foreground
Color text foreground

Body -> Layout -> Choose the Layout for the Site
Select Block for Sector One, Two, Three, Four, Five and Six

3 Footer -> General Settings
Enable Layout Large for Footer
Widget Area
Enable Layout Large for Aree Widget Footer
Number Column Aree Widget Footer
Show Logo Area Widget Footer
Select image Logo for Footer, Height Logo Widget Area (px Unit)
Select image for Footer
Background Color Widget Area, Color Widget Area
Footer Info
Enable Layout Large for Footer Info
Number Aree Info Footer
Show Menu Footer
Show Social Footer
Show Name Copyright Footer
Text Power, Text Copyright, Link Copyright, Open the link on another page
Height Info Footer Area (px Unit)
Background Color, Color

4 Blog -> Post
The page has 4 templates: Default template,Single Large, Single Sidebar Left, Single Large. You can select them in the dashboard in Post Attributes!
Margin Top Sidebar (px Unit)
Enable or disable sticky sidebar
Enable or disable sidebar in Mobile Devices
Show Breadcrumbs, Show Breadcrumbs, Show the categories above the title, Enable or disable meta info Post, Enable or disable update post info, Enable or disable border color meta info post
Round avatar
Border Radius Image Featured (% Unit)
Show Related Post, Text Related Post, Related Post for Category or Tags
Button Comment, Effect Button Comment
Text Button Comment, Background Color Button Comment, Color Button Comment
Category/Archive (This block has 2 Sidebar Widget Areas!)
Show Breadcrumbs
Enable or disable sticky sidebar
Category Badge Color
Enable or disable single color Badge Category, If you disable this control you can select a different color for each category directly from the administration page.
Comments Badge Color ( In Home Page)
Choose the Layout Category for Sidebar
Layout Article
Select image for Category
Height Header Category (px Unit), Padding Top Header Category (em Unit), Font Size Title Header Category (px Unit), Font Size Description Header Category (px Unit), Color Text Category
Search Page
Select image for Search Page
Height Header Search Page (px Unit)
Padding Top Header Search Page (em Unit)
Font Size Title Header Search Page (px Unit), Font Size Description Header Search Page (px Unit)
Color Text Header Search Page
Search Page not found
Title and subtitle
Select image for Search Page not found
Width Image Page not found (px Unit)
Size Button, Effect Button,Text Button, Background Color Button, Color Button
404 Page
Text 404 Page
Size Button, Effect Button,Text Button, Background Color Button, Color Button
Select image for 404 Page
Width Image
Contact Page
This page has 2 dedicated areas, 1 for the sidebar and one for the content. The recommended widget for the content is the Form Contact 7.
This is the recommended code for setting up the plugin form:
HTML:
<label class="pepe-left-7">
    [text* your-name placeholder "Your Name"]
</label>

<label class="pepe-right-7">
    [email* your-email placeholder "Your Mail"]
</label>



<label class="pepe-textarea-7">
    [textarea your-message placeholder "Your Message"]
</label>
<div class="pepe-color-button-7">
<a class="pep-6 pep3 pepe-submint-7">[submit "Submit Message"]<span></span></a>
</div>
Background Color and Color Button
Pages
The page has 4 templates: Default template,Page sidebar left, Page no sidebar, Page two sidebar. You can select them in the dashboard in Page Attributes!
Margin Top Sidebar (px Unit)
Enable or disable sticky sidebar
Enable or disable sidebar in Mobile Devices
Border Radius Image Featured (% Unit)
Padding Content (px Unit)
Background color Content Page

5 Other Settings -> Back to Top
Enable or disable Back to Top
Choose where to show the Back to Top(Right or Left)
Enable or disable Back to Top in Mobile Devices
Preloader
Enable or disable Preloader
Select image for Preloader, Recommended image type (.gif)
Typography
All Headings, Body Text, Nav Menu, Link, Block
H1 Heading: font size, style, weight, text transform, letter spacing
Excerpt
Excerpt length Content, Excerpt more Content
Excerpt length Title: Block Two, Block Three, Block Five, Widget Pepe post One, Widget Pepe post Two, Widget About, Widget Multitab
Social Media
Open the link on another page
Enable or disable social and insert the links
Login
Select Logo for Form Login
Width and height Logo
Margin Top Form Login
Text Login
Background color and color Form Login
Background Color Button Login
Choose whether to set a color or an image as the background for the Login page. If you choose an image it is recommended to set the color with transparency!
Background color Login Page
Background Image Login Page
Widget Style
Choose the Style for Title Widget
Widget Color
One Color Social
Enable or disable title Search
Widget Custom Color
Menu Responsive
Choose whether to set a color or an image as the background for the Menu and Search in Mobile Devices. If you choose an image it is recommended to set the color with transparency!
Background color Menu and Search, Color Menu, Search and Log In, Background Image Menu
Enable or disable Social in menu
Background color Sign In
Image Effect
Enable or disable the effect of scrolling images general site
Enable or disable the effect of scrolling images Block One/Two/Three/Five
Enable or disable the effect opacity of hover imagesIt has no effect on "Card, Card with Slider, Slider with Tab" blocks!

Colors
Select predefined skins to use with this theme (9 Skins)
Background Color
Enable/Disable Custom ColorEnable this option to select the colors you want!

Background Image
Set a background image for the site

Menus
This theme has 3 menus, you can create menus and set them in their positions!

Widget
This theme has 23 Widget areas, all Widgets have been customized.

Home Page Settings
You can choose what’s displayed on the homepage of your site. It can be posts in reverse chronological order (classic blog), or a fixed/static page. To set a static homepage, you first need to create two Pages. One will become the homepage, and the other will be where your posts are displayed.

Additional CSS
Here you can insert CSS code to modify the theme!
 
Last edited: