Hi,in this guide I will explain how to customize Pepe in a few simple steps.Let's begin!
Customization with import of the DemoAs 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 DemoAs soon as you have activated Pepe on your Homepage you will have the latest articles published.
In order in the Customizer
1 Header -> Blocks -> Block TopChoose the Layout for the Top HeaderEnable/Disable Box widthShow Login, Show Menu, Show SocialBackground Color, ColorBlock LogoChoose the Layout for the Logo HeaderEnable/Disable Box width, Margin Top Block (em Unit), Margin Bottom Block (em Unit), Header Background ColorLogo, Font Size Logo (px Unit),Logo alignmentSite 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 alignmentShow 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 IconEnable/Disable Banner in ResponsiveBackground color Header in ResponsiveColor Header in ResponsiveSelect image Logo for MobileWidth Logo (px Unit)Enable/Disable Description Site in ResponsiveFont 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 widthEnable/Disable sticky MenuEnable/Disable search form MenuFont Size Menu (px Unit)Padding Menu (px Unit)Background Color, ColorBlock NewsNews Header LayoutEnable/Disable Box widthEnable/Disable this sectionText NewsSelect Category NewsShow Date and TimeShow Time
Header -> Layout -> Choose the Layout for the Header
Header -> Header ImageClick “Add new image” to upload an image file from your computerHeight Image Header (px Unit)Object Fit Image Header
2 Body -> Blocks ->Block CardShow Card Appare EffectShow dark shadingCard LayoutMargin Top and Bottom (em Unit)Card One, Two Large, Three, FourSelect Category for post CardShow Category CardShow Comments CardEffect Hover CardBackground Color CardBlock Card with SliderShow Card Appare EffectShow dark shadingMargin Top and Bottom (em Unit)Select Category for post SliderShow Category SliderShow Icons SliderCard One,Two,ThreeSelect Category for post CardShow Category CardShow Comments CardEffect Hover CardBackground Color CardBlock Slider with TabChoose the Layout for the Block Slider with TabMargin 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 SliderShow Category Post in Multi-tabsTitle Tab One/Two/Three,Icons for Tab One/Two/Three, Select Category for Tab One/Two/ThreeBlock One (This block has 1 Sidebar Widget Area!)Choose the Layout for the Block OneMargin Top (em Unit), Margin Bottom (em Unit)Enable or disable Sticky SidebarEnable or disable Sidebar in Mobile DevicesBlock One Title,Title Style, Background Color Title, Color TitleShow Category, Show Comments, Show Author and DateBlock Two (This block has 2 Sidebar Widget Areas!)Choose the Layout for the Block TwoChoose the order for SectionsMargin Top (em Unit), Margin Bottom (em Unit)Enable or disable padding 0 contentEnable or disable Sticky SidebarEnable or disable Sidebar in Mobile DevicesGreat PostSelect PostsShow CategoryShow CommentsShow IconsBackground Color and Color Great PostCategory Badge Background Color and ColorComments Badge Background Color and ColorSmall postsSelect Category for post for Small postsNumber PostTitle for Small postsTitle StyleBackground Color and Color TitleShow Comments for Small posts, Show Date for Small posts, Show Author for Small postsBlock Three (This block has 2 Sidebar Widget Areas!)Choose the Layout for the Block ThreeMargin Top (em Unit), Margin Bottom (em Unit)Enable or disable Sticky SidebarEnable or disable Sidebar in Mobile DevicesTitle StyleBackground Color and Color TitleTitle Pepe Sect ThreeTitle Tab 1/2/ 3/4Icon Tab 1/2/3/4Select Category, Show Comments, Show Date, Show Author, Select Category for post(Bottom) 1/2/3/4Block FourImage Pepe Four, Height Image (px Unit), Object Fit ImageMargin 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:
<input type="email" name="EMAIL" placeholder="Your email address" required />
No spam, notifications only about new products, updates.
<input type="submit" value="Sign up" />
Background Color Banner, Color BannerText Banner, Textarea BannerText Button Banner, Link Button Banner, Open the link on another page, Background Color Button Banner, Color Button BannerBlock Five (This block has 1 Sidebar Widget Area!)Choose the Layout for the Block FiveTitle, Title Style, Background Color and Color TitleMargin Top (em Unit), Margin Bottom (em Unit)Enable or disable Sticky SidebarEnable or disable Sidebar in Mobile DevicesSelect Category for post, number post, Show Comments, Show Date, Show AuthorEnable or disable Posts foregroundColor text foreground
Body -> Layout -> Choose the Layout for the SiteSelect Block for Sector One, Two, Three, Four, Five and Six
3 Footer -> General SettingsEnable Layout Large for FooterWidget AreaEnable Layout Large for Aree Widget FooterNumber Column Aree Widget FooterShow Logo Area Widget FooterSelect image Logo for Footer, Height Logo Widget Area (px Unit)Select image for FooterBackground Color Widget Area, Color Widget AreaFooter InfoEnable Layout Large for Footer InfoNumber Aree Info FooterShow Menu FooterShow Social FooterShow Name Copyright FooterText Power, Text Copyright, Link Copyright, Open the link on another pageHeight Info Footer Area (px Unit)Background Color, Color
4 Blog -> PostThe 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 sidebarEnable or disable sidebar in Mobile DevicesShow 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 postRound avatarBorder Radius Image Featured (% Unit)Show Related Post, Text Related Post, Related Post for Category or TagsButton Comment, Effect Button CommentText Button Comment, Background Color Button Comment, Color Button CommentCategory/Archive (This block has 2 Sidebar Widget Areas!)Show BreadcrumbsEnable or disable sticky sidebarCategory Badge ColorEnable 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 SidebarLayout ArticleSelect image for CategoryHeight 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 CategorySearch PageSelect image for Search PageHeight 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 PageSearch Page not foundTitle and subtitleSelect image for Search Page not foundWidth Image Page not found (px Unit)Size Button, Effect Button,Text Button, Background Color Button, Color Button404 PageText 404 PageSize Button, Effect Button,Text Button, Background Color Button, Color ButtonSelect image for 404 PageWidth ImageContact PageThis 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:
[text* your-name placeholder "Your Name"]
[email* your-email placeholder "Your Mail"]
[textarea your-message placeholder "Your Message"]
<a class="pep-6 pep3 pepe-submint-7">[submit "Submit Message"]<span></span></a>
Background Color and Color ButtonPagesThe 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 sidebarEnable or disable sidebar in Mobile DevicesBorder Radius Image Featured (% Unit)Padding Content (px Unit)Background color Content Page
5 Other Settings -> Back to TopEnable or disable Back to TopChoose where to show the Back to Top(Right or Left)Enable or disable Back to Top in Mobile DevicesPreloaderEnable or disable PreloaderSelect image for Preloader, Recommended image type (.gif)TypographyAll Headings, Body Text, Nav Menu, Link, BlockH1 Heading: font size, style, weight, text transform, letter spacingExcerptExcerpt length Content, Excerpt more ContentExcerpt length Title: Block Two, Block Three, Block Five, Widget Pepe post One, Widget Pepe post Two, Widget About, Widget MultitabSocial MediaOpen the link on another pageEnable or disable social and insert the linksLoginSelect Logo for Form LoginWidth and height LogoMargin Top Form LoginText LoginBackground color and color Form LoginBackground Color Button LoginChoose 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 PageBackground Image Login PageWidget StyleChoose the Style for Title WidgetWidget ColorOne Color SocialEnable or disable title SearchWidget Custom ColorMenu ResponsiveChoose 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 MenuEnable or disable Social in menuBackground color Sign InImage EffectEnable or disable the effect of scrolling images general siteEnable or disable the effect of scrolling images Block One/Two/Three/FiveEnable or disable the effect opacity of hover imagesIt has no effect on "Card, Card with Slider, Slider with Tab" blocks!
ColorsSelect predefined skins to use with this theme (9 Skins)Background ColorEnable/Disable Custom ColorEnable this option to select the colors you want!
Background ImageSet a background image for the site
MenusThis theme has 3 menus, you can create menus and set them in their positions!
WidgetThis theme has 23 Widget areas, all Widgets have been customized.
Home Page SettingsYou 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 CSSHere you can insert CSS code to modify the theme!